开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜