IE9 Text Running Into Text, Not Clearing Divs

Upon testing an application I’m working on I noticed that IE9 wasn’t properly clearing text after floated divs. I have a big div which encompasses two floating divs (aka a two column display). A table is underneath the big div but with no clear. The reason there isn’t a clear is because the two column display is part of the right div of another two column display, if that makes sense.

Here’s the screen shot of what’s happening:

Bare in mind this only happens in Internet Explorer 9. All the rest of the browsers I test (including the likes of IE6 and IE7) all rendered it fine. Chrome, Safari, Opera, and Firefox were all good.

I understood the issue of why it was happening, but confused as to how to fix it.

It’s been a common issue with floating divs that the two columns are not equal height. There are a few tricks to do it, none of which I have implemented with much success.

The code is like this:

<div class=”entry”>

<div class=”list_container”>
<div class=”left_list_container”>

<div class=”right_list_container”>

</div> <!– entry end –>

With the CSS being:

div.entry { width: 720px; }
div.list_container { width: 100%; }
div.left_list_container { float: left; width: 300px; }

div.right_list_container { margin-left: 300px; max-width: 300px; }

Like I said before, I understand why it was doing it, I just wasn’t sure how to fix it.

Since this is an IE9 only bug, it was kinda hard finding a solution. I started primitively googling for IE9 bugs (which there aren’t many that are found yet).

I tried modifying the list_container class with no success. I added extra padding to the bottom, extra margin but nothing.

I tried to add a <div class=”clear”></div> in the middle of the entry div and table but that pushed the table past the bigger floating div, which isn’t want I wanted.

By adding an overflow: hidden to the div.entry class, it fixed the problem.  The table doesn’t run into the floated div now.