Auto-adjust the height of container

[iProgram]

<div id="container">
<div id="left">Left<br /><br /><br /><br /><br />Left</div>
<div id="right">Right<br /><br /><br /><br /><br />Right</div>
<div>

#container{
width: 500px;
margin: auto;
background-color: #FF0000;
}
#left{
width: 100px;
float: left;
background-color: #00FF00;
}
#right{
width:100px;
float: right;
background-color: #0000FF;
}

Looks ok in IE but the container does not expend its height value in Mozilla Firefox. What am I doing wrong?

[jetboy_70]

It's actually IE doing things wrong, not Mozilla. By making #left and #right floats, you are telling #container that it no longer needs to contain them, thus it collapses its height accordingly.

You can change this by either making #container itself a floated element (which will no doubt ruin its positioning), or use a clearing element below #left and #right in your code to force #container to contain it, and as a consequence, any elements above it.

At its simplest, this clearing element could be:

<div style="clear: both;"><br /></div>

but there are a lot or cross-browser issues with clearing floats, especially if you want to avoid the clearing element taking up any actual space itself. The different methods are covered here:

[pixelsurge.com ]

and I believe Big John at Position Is Everything has detailed a new method using the :after psuedo element.

[Saltminer]

The behavior you see in Firefox is correct. Per W3C standards, floats are allowed to extend out of their parent container. IE doesn't adhere to this and will expand the parent container to enclose the floats. You could use floats to do some neat layout stuff, except that IE has it wrong and will always enclose them, so your only choice is to code so that standards compliant browsers do the same. IE's behavior limits your ability to use floats as intended, even when viewed with a compliant browser, as you need the page to display the same in all.

To make it work properly in standards compliant browsers you need to enclose the floats in a "wrapper" div that is also floated. This wrapper will expand to contain the floated items so it displays the same in all browsers. It will still display correctly in IE, both now and if/when MS decides to "fix" IE so it works correctly.

Edit: It looks like jetboy_70 beat me to the reply on this one. That's what happens when you start a reply and then come back an hour later to finish it.

Jimmy

[Emperor]

Damn, I was always using this:

div.clear {
clear: both;
}

<div class="clear"></div>

...which seemed to work fine in Firefox and IE6 but I didn't test it in anything else.

I just added 'clear: both' to my footer and got rid of the above. The thing is, what if no floats come before my footer, is it still alright to have the clear in there?

Take care,
Emperor

[jetboy_70]

what if no floats come before my footer, is it still alright to have the clear in there?

It certainly won't do any harm, other than maybe taking up a bit of vertical space.

I can sympathize. I recently found out that the clearing DIV I use wasn't being picked up by Firefox on the Mac. It's fine on Windows flavours of Moz - I've tested all the way back to 0.9 - and any other Windows, Mac and *nix browsers that have had any sort of userbase, but this one slipped through!