How to ensure IE6 containers see floats
(No big point in seeing this page in anything but IE6).
Mostly, IE6 grows height for floated children. But there are exceptions and here are some special remedies for those who want to make sure their IE6 float containers physically contain their floated children. The remedy of overflow: hidden; on the container that works for good moden browsers will not work on IE6. The clearing div technique discussed on page7 will work; but this often requires an extra div that some would prefer not to have.
See how the following container grows height to cover its floats in IE6:
Fig 1. <div style="width: 500px; background: #ccc; border: 4px solid #000;"><img style="float: left;" src="../pics/red.gif" width="104" height="133" alt=""><img style="float: left; " src="../pics/green.gif" width="200" height="50" alt=""></div>
But if we remove the width specification on the container div, this is what happens:
Fig 2. <div style="background: #ccc; border: 4px solid #000;"><img style="float: left;" src="../pics/red.gif" width="104" height="133" alt=""><img style="float: left;" src="../pics/green.gif" width="200" height="50" alt=""></div>
In good modern browsers, parent containers are blind to their floats and the presence or absence of explicit width in the CSS is irrelevant. But saying in the CSS, width:100% or any other percentage or unit will trigger IE6 to grow sufficient height!
Fig 3. <div style="width: 100%; background: #ccc; border: 4px solid #000;"><img style="float: left;" src="../pics/red.gif" width="104" height="133" alt=""><img style="float: left;" src="../pics/green.gif" width="200" height="50" alt=""></div>
Equally oddly, instead of an explicit width, a nominal height will also trigger the same effect. It is not really as if any of this has any real transparent reason. Try this in IE6:
Fig 3. <div style="height: 1px; background: #ccc; border: 4px solid #000;"><img style="float: left;" src="../pics/red.gif" width="104" height="133" alt=""><img style="float: left;" src="../pics/green.gif" width="200" height="50" alt=""></div>
It is beyond the scope of these pages to discuss best ways of telling IE6 what to do while yet trying to write good code for other browsers. I will just mention that you can let IE6 take an instruction that other browsers will not see by a conditional comment like:
<!--[if IE 6]>
<style type="text/css" media="screen">
.container {height: 1px;}
</style>
<![endif]-->
in the head of the HTML doc. Or include all the things you want IE6 to know with a CSS sheet just for it:
<!--[if IE 6]>
<style type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="all" href="ie6.css">
</style>
<![endif]-->