Weird CSS behavior... removing a 1px border makes <DIV> move about 20px
- by John
I have the following:
CSS
#pageBody
{
height: 500px;
padding:0;
margin:0;
/*border: 1px solid #00ff00;*/
}
#pageContent
{
height:460px;
margin-left:35px;
margin-right:35px;
margin-top:30px;
margin-bottom:30px;
padding:0px 0 0 0;
}
HTML
<div id="pageBody">
<div id="pageContent">
<p>
blah blah blah
</p>
</div>
</div>
</div>
If I uncomment the border line in pageBody, everything fits sweetly... I had the border on to verify things were as expected. But removing the border, pageBody drops down the page about 20px, while pageContent does not appear to move at all.
Now this is not the real page, but a subset. If nothing's obvious I can attempt to generate a working minimal sample, but I thought there might be an easy quick answer first.
I see the same exact problem in Chrome and IE8, suggesting it's me not the browser. Any tips where to look? I wondered maybe the 1px border was some tipping point making the contents of a div just too big, but changing #pageContent height to e.g 400 makes no difference, other than clipping the bottom off that div.
