Wrapper question quand contenant des divs flottants

Je voudrais créer un wrapper, centré sur le navigateur, bordé, qui se développe automatiquement en hauteur autour de divers divs. Lorsque vous utilisez des flottants pour garder les divs en ligne, l'encapsuleur s'arrête juste après le premier div. Soyez gentil, cela peut être ou ne pas être la bonne façon de le faire, mais c'est pourquoi je suis ici.Wrapper question quand contenant des divs flottants

Voici un exemple simple.

<head> 

<style type="text/css"> 
<!-- 
#wrapper { 
height: 100%; 
width: 800px; 
border: 1px solid #000; 
margin-right: auto; 
margin-left: auto; 
} 
#header { 
height: 100px; 
width: 800px; 
} 
#column1 { 
width: 300px; 
height: 400px; 
float: left; 
} 
#column2 { 
height: 400px; 
width: 300px; 
float: left; 
} 
#navbox { 
float: left; 
width: 200px; 
height: 400px; 
} 
--> 
</style> 

</head> 

<body> 

<div id="wrapper"> 

<div id="header">test header</div> 
<div id="navbox">test navbox</div> 
<div id="column1">test column1</div> 
<div id="column2">test column2</div> 

</div><!--Close_wrapper--> 
</body> 
</html>

Source

2010-01-15 Scott C.

pouvez-vous poster le code html aussi? – Flatlin3

La réponse aux questions qui contiennent float et wrap dans une phrase est généralement

overflow: auto

Si vous voulez que votre emballage à auto-expansion en hauteur, qui devrait fais le.

Source

2010-01-15 16:32:21

De loin la solution la plus élégante que j'ai trouvée au problème. Merci! – nunespascal

Grande réponse et avec une règle lapidaire pour démarrer! Je vous remercie. –

Vous devez ajouter un élément avec clear:both après le div s.

Demo

Source

2010-01-15 16:34:17 SLaks

Ceci est correct. SLaks messages plus rapidement que moi. – Wes

Vous pouvez ajouter quelque chose comme < br style = « clear: both »/> que le dernier élément de votre emballage pour le forcer à enrouler autour de vos éléments qui sont en dehors du flux de contenu.

<div id="wrapper"> 

<div id="header">test header</div> 
<div id="navbox">test navbox</div> 
<div id="column1">test column1</div> 
<div id="column2">test column2</div> 

<br style="clear:both" /> 

</div><!--Close_wrapper-->

Source

2010-01-15 16:37:15 Wes

Je voudrais utiliser la classe: après le psuedo comme ci-dessous. Il semble un peu plus évident ce qui est censé se produire et un peu moins comme l'étrangeté du navigateur. Je ne suis pas sûr que cette solution de débordement est officiellement censé fonctionner.

#wrapper:after { 
    clear:both; 
    display: block; 
    content: " "; 
}

Source

2013-07-22 11:03:37 cedd

Wrapper question quand contenant des divs flottants

Répondre

Questions connexes