IE7 doesn't play nice with my floating sidebar

I am trying to get a sidebar with a dynamic size to float in the upper right of my web pages (but below the title and navigator) and have the main content on the page flow (sort of like in the "L" shape, except that the bottom is " L "really fat). The width and height of the sidebar will vary from page to page, so I cannot use any hard values.

My css looks like this:

#main {
    width: 850px;
    height: auto;
}

#sidebar {
    width: auto;
    float: right;
}

(plus some space, margin and background color code, I think is not significant)

My html looks like this:

<div id="wrapper">  
    <div id="header">    /* header stuff */    </div>  
    <div id="nav">       /* nav stuff */       </div>  

    <div id="sidebar">  
        /* my sidebar content, really just an h3 and a ul */
    </div>

    <div id="main">
        /* lots of content here */
    </div>
</div>

, div, FF, Chrome, Safari (Windows) IE8. IE7 ( IE6, ) , div "clear: left" ( ).

, , IE7, , IE8 , . , .

? .

+5
3

, doctype, IE7 (. http://hsivonen.iki.fi/doctype/ ). , , .

, div, div , ( div).

div , , div . , float div float div div.

+2

, , , , . , , . min-width. , .

0

! ! , , , . , , , div, , . FF3, Chrome, Safari (Win) , , IE6 IE7 ( IE).

, IE : " , , div 850px , , , , ". , : ", , ! , , ".

0
source

All Articles