IE7 div floating bug

Posted by Michael Frey on Stack Overflow See other posts from Stack Overflow or by Michael Frey
Published on 2010-04-08T10:07:26Z Indexed on 2010/04/08 10:13 UTC
Read the original article Hit count: 319

Filed under:
|
|

I have the following

<div id="border" style="width:100%; border:8px solid #FFF">
    <div id="menu" style="width:250px; float:left;" >
        Some menu
    </div>
    <div id="content" style="padding-left:270px; width:520px;" >
        Main page content
    </div>
</div>

This gives me a left aligned menu and the content to the right of it, all surrounded by a border.

On all browsers including IE8 it displays correctly.

But on IE7 the content only starts below the menu, and leaves a big open space to the right of the menu.

I have searched all kind of solutions and tried all kinds of combinations of right, left, none for float. clearing left right both. It always displays different on the browsers.

Any help is appreciated. Michael

© Stack Overflow or respective owner

Related posts about floating

Related posts about ie6-ie7-bug