CSS: Question de mise en page de base - garder les éléments imbriqués les uns dans les autres

Question

Je continue à trouver que si j'ai divs imbriqués l'un dans l'autre, et l'un des intérieurs est flottant, l'extérieur ne se développera pas autour d'elle.

Exemple:

<div style='background-color:red; '> 
    asdfasdf 
    <div style='float:left; background-color:blue; width:400px; height:400px;'> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
    </div> 
    asdfasdf 
</div> 

Que dois-je faire pour la div extérieure pour faire couvrir l'intérieure? IE: Mettez sa couleur de bordure/arrière-plan tout autour?

De plus, y a-t-il un principe général auquel je suis confronté? Si oui, que dois-je rechercher pour bien comprendre ce que c'est?

Merci!

Modifier

Salut à tous,

Merci pour les réponses, sémantiquement correctes et non, et pour les liens. Bien que je finirai par utiliser le débordement dans le travail final, je laisserai la réponse d'Ant P acceptée, car elle a été la première qui a vraiment fonctionné, et m'a sorti d'une confiture à court terme, même si cela offensait la sémantique sensibilité. En tant que hack html de longue date essayant de passer à des mises en page CSS correctes, je peux certainement comprendre, et sympathiser, en utilisant hack sémantiquement incorrect qui fait le travail, mais je suis sûr qu'il va changer cette habitude après cela = o)

Answer 1

vous pouvez le faire avec CSS en utilisant strictement overflow: hidden

<div style='background-color:red;overflow:hidden;'> 
... 
</div> 

Answer 2

Si vous flottez juste la div extérieure, il sera étendu à contenir le div imbriqué. La combinaison d'éléments flottants et non-flot- tés dans la disposition est généralement gênante.

Answer 3

il est simplement stupéfiant combien de fois c'est le problème de base pour certaines des questions CSS sur SO. Ce qui est encore plus stupéfiant, c'est combien de fois quelqu'un donne une réponse comme Ant P's. Bien que techniquement correct, il est complètement sémantiquement incorrect. Themis a absolument raison. Ajoutez simplement overflow:hidden au parent des divs flottants. Parfois, pour le rendre agréable avec IE, vous devrez peut-être spécifier une largeur OU une hauteur. C'est vraiment tout ce qu'il y a à faire.

Answer 4

Si vous êtes ici quelques excellents articles qui expliquent plusieurs méthodes du type qui aime des explications (plutôt que "faire"):

Simple Clearing of Floats

How to Clear Floats Without Structural Markup

Clearing Floats

Answer 5

Cet article sur CSS systems vaut vraiment la peine d'être lu. Comme Darko Z a dit qu'il est stupéfiant de voir la réponse sémantiquement incorrecte donnée par Ant P.

Answer 6

Je ne peux pas battre les réponses qui ont été postées, mais j'ai un bon conseil pour aider à diagnostiquer les problèmes de mise en page sans foirer votre balisage.

Ajouter cette section au bas de votre fichier CSS et conservez-le en commentaire lorsque vous n'avez pas besoin:

div 
{ 
    border-width: thin !important; 
    border-color: Orange !important; 
    border-style: solid !important; 
} 

label, span, /* whatever else you might want to see */ 
{ 
    border-width: thin !important; 
    border-color: Blue !important; 
    border-style: solid !important; 
} 

Souvent, je vais trouver qu'une mise en page qui fonctionne réellement (en particulier celui qui utilise le "ajouter un <br> avec un style clear: both) ne coïncidera pas avec celui de clear: both, mais quelqu'un a modifié le CSS pour qu'il fonctionne avec voodoo. ne pas avoir à toucher votre vrai balisage ou votre CSS principal pour activer les débogages pour le débogage