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.

Scenario:
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>
</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.

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

<!–[if IE 6]>
div#wrapper {
height:100%;
overflow:hidden;
}
<![endif]–>

Thanks for reading

Damien
@DamienH

Advertisements

2 responses to “IE6 Hack – replacing clear:both;

  1. Thanx !

  2. Thank you. This bothers me a ton.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s