Pourquoi avec ce CSS l'attribut background-color ne fonctionne pas?

<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 obtenir le bon arrière-plan. Si j'essaie Chrome ou firefox, ils n'ont pas l'arrière-plan. Pourquoi? CheersPourquoi avec ce CSS l'attribut background-color ne fonctionne pas?

Source

2010-10-13 markzzz

Les éléments flottants n'influencent pas la hauteur de leur conteneur. Vous rencontrez un bug dans IE parce que vous ne déclenchez pas Le mode Standards est un Doctype raisonnablement moderne.

Voir complex spiral pour une explication des raisons pour lesquelles les choses fonctionnent de cette façon et Ed Elliot's blog pour un certain nombre de meilleures façons de compter flotteurs dans la hauteur.

Source

2010-10-13 14:04:36 Quentin

uhm. Si j'écris float: left; sur #ROOT je peux voir ce changement de fond. Mais la div principale va à gauche, et n'est pas plus centrée :( – markzzz

Votre réponse est dans ses articles, essayez de les lire – Tim

Alors ne flottez pas la racine! Il y a d'autres approches, vous avez choisi le 4ème dans la liste à Le blog d'Ed. J'utiliserais généralement la méthode de débordement moi-même – Quentin

Essayez d'attribuer une hauteur aux divs.

Source

2010-10-13 14:05:58

Pourquoi avec ce CSS l'attribut background-color ne fonctionne pas?

Répondre

Questions connexes