Question

I have div containing multiple divs and text. The inner divs are alternately floated left and right and the text flows along side them in all browsers (including IE8) except for IE7. In IE7 the text is pushed to the bottom so that it is aligned with the top of the final inner div. I have tried all sorts of solutions and have read a good article on the subject

However, I’m still unable to prevent the text from being cleared in IE7. Here’s the relavent HTML (please note this div is nested within an HTML table with a specified width as it is a legacy site. I have tried pulling the div out of the table, but the same behaviour occurs anyway):

<div>
    <div class="left"></div>
    <div class="right"></div>
    Text goes here
    <br />
    Text goes here
</div>

And CSS:

.left { float:left; }
.right { float: right;}

I have tried applying display:inline, display: inline-block, clear: none, overflow: hidden, specifying widths, position: relative to the containing div, various hacks such as IE7 conditional with zoom: 1, min-width: 1% – basically hours of pulling my hair out and dredging Google for answers but I haven’t found anything that works. Has anyone encountered this problem before and got a fix for it?

(for testing i am running IE8 in compatability mode in Vista)

Answer 1

I am sure of the headaches that IE7 brings. Thank God that it is much better than IE6, but it was a headache for me in many situations.

In this case I recommend that you generate IE7 specific code using tables!