Question

I’m trying to create a simple markup with header+content+footer+sidebar. The sidebar must float above the header and content element, and if it’s taller than the content, it must push the footer down (like this: http://jsfiddle.net/gWLFN/7/).

The HTML:

<div id="wrapper">
    <div id="sidebar">sidebar</div>
    <div id="header">header</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

The CSS:

#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar { 
    float:right; 
    margin-top:50px; 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

The problem is that in IE7, the sidebar pushes down the other elements. I think it’s because the total widths of header+sidebar is greater than wrapper width. I have found a lot of posts about float:right problem in IE7, but all of them are for widths that doesn’t exceede the wrapper.

I have choosen float:right instead of absolute positioning because the position of the footer must depend on sidebar height (if someone knows how to do this with absolute positioning, perfect!).

I would appreciate any idea to solve this.

Answer 1

You are almost there, the order of the HTML structure is slightly muddled and you are forcing CSS widths rather than letting the browser work out the best fit.

You can remove the width values from the nested CSS classes (except #sidebar) as, by default, they take up any remaining width unless they have one specified. Then you just need to swap #header and #sidebar round in the HTML structure and you are pretty much sorted.

Please note, since we have swapped round #header and #sidebar, the margin-top within #sidebar has been changed.

CSS

#wrapper { 
    width:500px;
}

#header {
    height:100px;
    background-color:red;
}

#content {
    height:300px;
    background-color:green;
}

#footer {
    height:100px;
    background-color:blue;
}

#sidebar { 
    float:right; 
    margin-top: -50px; /*changed this to -50px */ 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

HTML

<div id="wrapper">
    <div id="header">header</div>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

Working example: http://jsfiddle.net/gnx2z/