Why with this css the background-color attribute doesn't work?
<body>
<div>
<div id="ROOT" >
<div id="ROOT_0" >
header
</div>
<div id="ROOT_1" >
main
</div
<div id="ROOT_2" >
footer
</div>
</div>
</div>
</body>
html {height:101%;}
body {background:#FFFFFF;}
#ROOT{ background-color:#666666; width:980px; margin-left:auto; margin-right:auto;}
#ROOT_0{back开发者_C百科ground-color:#FF9933; width:970px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px;}
#ROOT_1{width:980px; text-align:center; float:left;}
#ROOT_2{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:10px; margin-bottom:5px; margin-left:5px; margin-right:5px;}
IE get the right background. If i try on Chrome or firefox they don't get the background. Why? Cheers
Floated elements don't influence the height of their container. You are experiencing a bug in IE because you are not triggering Standards mode is a reasonably modern Doctype.
See complex spiral for an explanation as to why things work this way and Ed Elliot's blog for a number of better ways to count floats in the height.
Try to assign height to the divs.
精彩评论