centered fixed width layout breaking in IE6
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>
</div>
somehow the layout breaks in IE6: the whole layout floats to the left!
any knowhows on this one?
EDIT: layout is valid; centering works 开发者_如何学Goin IE7 and 8 (but breaks in quirks)
EDIT here's how it looks in quirks mode alt text http://www.freeimagehosting.net/image.php?2646ed5285.png
You need to have a doctype declared..
any doctype will do ..
(checked)
Try this styling instead, there's no reason to float anything but the side-bar, just adds more complexity to confuse IE6.
div#wrapper{width:900px; margin: 0 auto;}
div#header{width: 900px;}
div#sidebar{float:left; width: 300px;}
div#content{margin-left: 300px; width:600px;}
div#footer{width: 900px; clear:both;}
Like Gaby says, a doctype will do the trick. Give this a try at the top of your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加载中,请稍侯......
精彩评论