A
Andrew Crowe
Hi guys,
I've come across a strange problem while using divs/css to create a page
layout (on an xhtml 1.0 transitional page)
I'm using two nested divs to create a kind of border style (I want a
patterened border so I can't just use border styles)
<div id="box-border"><div id="box-inner">
<p>Content</p>
</div></div>
If I use the following CSS the outer div works fine but the inner div
has incorrect margins (the top and bottoms crash and the content in
box-inner is all over the place):
#box-border{
margin:64px;
background-color:red;
}
#box-inner{
margin:4px;
background-color:blue;
}
That fails in both mozilla and explorer (although they both look different)
however, if I add padding:1px; (or more) to both divs suddenly they
display fine. why does adding a padding value affect how the margins are
displayed? Is there some block mode rule in effect?
Thanks
Andrew
I've come across a strange problem while using divs/css to create a page
layout (on an xhtml 1.0 transitional page)
I'm using two nested divs to create a kind of border style (I want a
patterened border so I can't just use border styles)
<div id="box-border"><div id="box-inner">
<p>Content</p>
</div></div>
If I use the following CSS the outer div works fine but the inner div
has incorrect margins (the top and bottoms crash and the content in
box-inner is all over the place):
#box-border{
margin:64px;
background-color:red;
}
#box-inner{
margin:4px;
background-color:blue;
}
That fails in both mozilla and explorer (although they both look different)
however, if I add padding:1px; (or more) to both divs suddenly they
display fine. why does adding a padding value affect how the margins are
displayed? Is there some block mode rule in effect?
Thanks
Andrew