Tag Archives: wrapping

IE6 Hack – replacing clear:both;

I’ve been excessively frustrated with IE6 for a long time now and despite my growing anger I’m still forced to work with this terrible software day in and day out.  Yesterday I was working for about 6 hours on IE6 fixes and I came across a quite handy hack.

You have a <div> wrapped around 3 elements that are all floated left like so:

<div id=”wrapper” style=”margin-bottom:15px;”>
<div style=”float:left;” id=”A”>A</div>
<div style=”float:left;” id=”B”>B</div>
<div style=”float:left;” id=”C”>C</div>

Given the above scenario in any browser the wrapper div (#wrapper) would not assume any height.  In more recent browsers the fix for this scenario would involve a choice of two approaches:

  1. Adding an element after #C that has style=”clear:both;”
  2. Adding style=”overflow:hidden;” to #wrapper

Although the first approach is 100% reliable I hate the additional markup.  I find that when I add <div style=”clear:both;”></div> in one place it ends up all over my site.  So I always use the second approach, <div id=”wrapper” style=”overflow:hidden”>.  It allows for clean markup which doesn’t clutter your editing experience and it shifts the responsibility of the visual layout to the CSS.

Well to not surprise the user of overflow:hidden; doesn’t have this affect in IE6 and it doesn’t work with overflow-x:hidden; or overflow-y:hidden;.  You can’t set a min height (at least not a reliable one) and height:auto; will also always display a heightless #wrapper.

The solution, set the height (in IE6 only) to 100% and set the overflow to hidden like so.

<!–[if IE 6]>
div#wrapper {

Thanks for reading