div css margins broken when no padding is applied

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
 
S

Steve Pugh

Andrew Crowe said:
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)

I don't see any patterned border from the styles you've quoted, all I
see is a 4px red border around a blue content area.

margin: 64px;
border: 4px solid red;
background-color: blue;

would acheive exactly the same result with less code and no collapsing
margins problem.
<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?

As per the CSS spec adjacent vertical margins collapse. You need
padding or a border between them to prevent this.

Steve
 
A

Andrew Crowe

Steve said:
I don't see any patterned border from the styles you've quoted, all I
see is a 4px red border around a blue content area.

Yeah, I know, that was just a simple example to illustrate my point (no
point pasting in the whole code as it looked the same without the extra
stuff)
As per the CSS spec adjacent vertical margins collapse. You need
padding or a border between them to prevent this.

Ah that must be why.

Anyway in light of that I've changed it to use a mix of padding and
margins (I was hoping for some simpler code, but this isn't too bad I
guess).



Thanks

Andrew
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top