views:

34

answers:

2

Hi. This is my code :

<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{background-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

+4  A: 

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.

David Dorward
uhm. If i write float:left; on #ROOT i can see that background change. But the main div go to the left, and is not more centered :(
markzzz
Your answer is in his articles, try reading them.
Tim
So don't float the root! There are other approaches, you picked the 4th in the list at Ed's blog. I'd generally use the overflow method myself.
David Dorward
oh yeah!! overflow:auto works :) I'll use this, i don't care about IE for mac :)
markzzz
A: 

Try to assign height to the divs.

Júlio Santos