Strange IE margin issue

Not the double margin float bug

[Dabrowski]

.... I don't think....

ok, here's my page:

/-----------------------------------\ 
¦..............HEADER...............¦ 
\___________________________________/ 
. . . . . . . . . . . . . . . . . . . 
/-----------------------------------\ 
¦..............NAVBAR...............¦ 
\___________________________________/ 
. . . . . . . . . . . . . . . . . . .  
/------\ /--------------------------\ 
¦......¦ ¦.......MINI HEADER........¦ 
¦......¦ \__________________________/ 
¦......¦. . . . . . . . . . . . . . . 
¦......¦ /----------------\ /-------\ 
¦.LEFT.¦ ¦................¦ ¦.......¦ 
¦......¦ ¦................¦ ¦.......¦ 
¦......¦ ¦................¦ ¦.......¦ 
¦......¦ ¦....CONTENT.....¦ ¦.......¦ 
¦......¦ ¦................¦ ¦.......¦ 
\______/ ¦................¦ ¦.......¦ 
. . . . .¦................¦ ¦.RIGHT.¦ 
. . . . .\----------------/ ¦.......¦ 
. . . . . . . . . . . . . . ¦.......¦ 
. . . . . . . . . . . . . . ¦.......¦ 
. . . . . . . . . . . . . . ¦.......¦ 
. . . . . . . . . . . . . . ¦.......¦ 
. . . . . . . . . . . . . . ¦.......¦ 
. . . . . . . . . . . . . . \_______/ 
. . . . . . . . . . . . . . . . . . . 
. . . . ./--------------------------\ 
. . . . .¦..........BOTTOM..........¦ 
. . . . .\__________________________/ 
. . . . . . . . . . . . . . . . . . . 

And here's the code......

<div id='header'>Stuff</div>
<div id='navbar'>Stuff</div>

<div id='columns'>
...<div id='left'>Stuff</div>
...<div id='miniheader'>Stuff</div>
...<div id='right'>Stuff</div>
...<div id='content'>Stuff</div>
...<div id='bottom'>Stuff</div>
</div>

#columns {
position: relative;
overflow: auto;
width: 100%;
}

#left {
float: left;
width: 160px;
}

#right {
float: right;
width: 290px;
}

#content {
margin-left: 170px;
margin-right: 300px;
}

#miniheader {
height: 50px;
}

#bottom {
margin-left: 170px;
margin-top: 20px;
}

The header, navbar, and mini header are not a problem, and the layout works fine, just 1 little issue.....

Now, the problem I'm having is with the #bottom, as you can see I want a 20px gap above it. There is no way to know whether the #content, or #right will be the tallest div, depends on the page.

In IE this works fine, in FF if the #right is longer, the gap disappears. I'm guessing that's cos it's floated and FF is correct.

So, I put a bottom margin on #content, and #right, so whichever was longer would push #bottom downwards. Works in FF, but IE, somehow, applies the #content margin as well, even if the column is much shorter. I verified this by removing the margin from #right.

I know I could fix this by moving #bottom out of #columns, but there are a lot of pages to change if I go down that road!

Is there a way to make IE behave, or find a happy compromise?

[Fotiman]

In IE this works fine, in FF if the #right is longer, the gap disappears. I'm guessing that's cos it's floated and FF is correct.

Would adding "clear:both" to your #bottom (and keeping the top margin on #bottom) solve your problem?

[Dabrowski]

Sorry, #bottom does have clear both.

[Fotiman]

Ok, what if you try floating the #bottom as well (still keeping the clear:both on it too)?

[Dabrowski]

ok, setting #bottom to clear: both; float: left; works in both.

Thanks.

But I still don't understand why?

[Xapti]

Because as far as I know, clear only works on elements that are floated.

[w3.org...]

[Dabrowski]

#bottom was clearing the columns, but the margin wasn't working if the floated #right was longer than #content.

I assume margin's don't take into account floated boxed, which would make FF's interpretation correct, but by floating #bottom it does take other floats into account.

I would like someone to confirm if this is correct or not, and if not explain the behaviour. What's weird in IE is that if a bottom margin of 20px is set on #content and #right (without top margin on #bottom), the gap is always 40px in IE.