I am usually using this code

div#wrapper{width:900px; margin: 0 auto;}

div#header{float:left; width: 900px;}

div#sidebar{float:left; width: 300px;}

div#content{float:left; width:600px;}

div#footer{float:left; width: 900px; clear:both;}

and I have this markup

<div id="wrapper">
 <div id="header"></div>
 <div id="sidebar"></div>
 <div id="content"></div>
 <div id="footer"></div>

somehow the layout breaks in IE6: the whole layout floats to the left!

any knowhows on this one?

4 answers


Why are you floating the #header and #footer? They are the same size as the parent #wrapper div and will just fit.

I don't have IE6 available to me at the moment but try this.


#wrapper{width:900px; margin: 0 auto; position: relative;}

#header{width: 900px;}

#container{position:relative; width:900px;}

#sidebar{width: 300px; }

#content{width:600px; position: absolute; top:0px; right: 0px;}

#footer{width: 900px; }


<div id="wrapper">
 <div id="header"><p>&nbsp;</p></div>
 <div id="container">
     <div id="sidebar"><p>&nbsp;</p></div>
     <div id="content"><p>&nbsp;</p></div>
 <div id="footer"><p>&nbsp;</p></div>
Answered over 9 years ago by David Leininger

I wouldn't think you need float:left on div#header... or on div#footer...

Answered over 9 years ago by Dwayne Anderson
o.k.w 2355

Your header and footer should not have "float: left".

Modify the definitions for header and footer to the following should do, as default width for a DIV is 100% of it's parent container.


<style type="text/css">
    div#wrapper {width:900px; margin: 0 auto;}
    div#header {clear:both;}
    div#sidebar {float:left; width: 300px;}
    div#content {float:left; width:600px;}
    div#footer {clear:both;}
<!--[if IE 6]>
<style type="text/css">
    body {text-align: center;}
    div {text-align: left;}

The IE Conditional Comment is to fix the issue of IE6's centering problem with "margin: 0 auto".

Answered over 9 years ago by o.k.w

you need the

body {text-align: center;}
div {text-align: left;}

css for older IE's

you may also have triggered float bugs affecting the widths and margins.

I find it good practice for any floated div that also has a declared width to set display:inline; on it as well - that usually heads off a bunch of IE6 float bugs from the start.

but I suspect the real problem is that all the contained divs are floated out of the wrapper!

add overflow:hidden; to the wrapper div to get it to enclose them.


body {text-align: center;}

div {text-align: left;}

div#wrapper{width:900px; margin: 0 auto; overflow:hidden;}

div#header{float:left; width: 900px; display:inline;}

div#sidebar{float:left; width: 300px; display:inline;}

div#content{float:left; width:600px; display:inline;}

div#footer{float:left; width: 900px; clear:both; display:inline;}
Answered over 9 years ago by Tony Crockford