firefox margin-bottom not working

[StoutFiles]

I have three div's. Div 3 is inside Div 2; Div 2 is inside Div 1. Each div has a width 2 pixels less than the previous div, which will appear to create a double border around div 3.

The problem is Firefox is ignoring margin-bottom for Div 2 and I'm not getting the red border to show up at the bottom. Works fine in IE6 and up. Code below.

#top_nav {
position: relative;
margin: 0 auto;
background-color: #666666;
width: 280px;
float:left;
text-align: center;
}

#top_nav2 {
position: relative;
background-color: #ff0000;
width: 278px;
margin: 0 auto;
margin-bottom: 1px;
text-align: center;
}

#top_nav3 {
position: relative;
background-color: #00ff00;
width: 276px;
margin: 0 auto;
margin-bottom: 1px;
}

<div id="top_nav">
<div id="top_nav2">
<div id="top_nav3">
this<br>is<br>a<br>test
</div>
</div>
</div>

[StoutFiles]

For the time being I've found a temporary fix by adding "padding:0.01px;" into #top-nav2. Not sure why this works.

[drhowarddrfine]

Are you using a doctype?
Either this has to do with borders collapsing or the fact that floats are removed from the normal flow. Ignore what IE is doing since IE can't be trusted to do anything right despite it seeming to do so now.

[StoutFiles]

Doctype is strict.

[Fotiman]

Yes, this is Collapsing Margins [w3.org]. A few things...

There is no such thing as 0.01px. Pixels are whole numbers only. Therefore, 0.01px = 1px.

The solution is to use padding instead of margins.

#top_nav {
position: relative;
margin: 0 auto;
background-color: #666666;
width: 280px;
float:left;
text-align: center;
padding-bottom: 1px;
}

#top_nav2 {
position: relative;
background-color: #ff0000;
width: 278px;
margin: 0 auto;
padding-bottom: 1px;
text-align: center;
}

#top_nav3 {
position: relative;
background-color: #00ff00;
width: 276px;
margin: 0 auto;
}

[StoutFiles]

That fixed it! Thank you.

[Netson]

A similar problem, and fails to correct

[StoutFiles]

A similar problem, and fails to correct

Might as well post your code in here.