Comment redimensionner automatiquement la div wrapper en utilisant CSS

Question

J'ai été aux prises avec ce problème ..

Il y a un div wrapper et contient 3 divs de colonnes verticales avec plein de textes, et ce wrapper div a rouge couleur de fond de sorte qu'il peut être un fond de l'ensemble des textes.

<div id="content_wrapper"> 

    <div id="cside_a"> 
     // massive texts goes here 
    </div> 

    ... // two more columns go here. 

</div> 

Et voici le code CSS pour eux.

#content_wrapper 
{ 
background-color:#DB0A00; 
background-repeat:no-repeat; 
min-height:400px; 
} 
#cside_a, #cside_b, #cside_c 
{ 
float: left; 
width: 33%; 
} 

Et ce code me donne un arrière-plan qui couvre case seulement 400px de hauteur .. Mon attente était l'emballage div redimensionne automatiquement en fonction de la taille des divs en elle.

En quelque sorte mettre "débordement: caché" avec le code CSS wrapper fait tout fonctionne bien.

Je n'ai aucune idée pourquoi "overflow: hidden" fonctionne ... cela ne devrait-il pas masquer tous les textes débordés ..?

Quelqu'un pourrait-il m'expliquer pourquoi? Est-ce la bonne façon de le faire quand même?

Answer 1

Votre problème est dû au fait que vos colonnes sont flottantes. Jetez un oeil à 'Clearfix'

Answer 2

vous avez besoin de vider vos flotteurs. ajoutez ce qui suit après votre troisième colonne.

<div class="clear"></div> 

et ceci à votre css

.clear {clear:both;float:none;}