IE7 div floating bug

Question

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

Answer 1

Remove the padding on your content div and set it to float left.

You might have to put <div style="clear: left"></div> after it