Div n'a pas de hauteur à moins que je ne lui donne min-hauteur

Question

Je pense que c'est parce que je suis en train de flotter tous les trois divs "colonnes" à gauche, à l'intérieur du div principal du corps.

Comment puis-je dire à la division principale du corps de se développer aussi grande qu'elle doit s'adapter aux divs de contenu?

Ici, il est avec min-height:

Et ici avec le min-height ôtés

Voici mon code correspondant.

#body 
{ 
    border:1px solid blue; 
    width:950px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:15px; 
} 

#leftcolumn 
{ 
    min-height:500px; 
    float:left; 
    width:190px; 
} 

#contactarea 
{ 
    font-family:Arial; 
} 

#contactarea p.heading 
{ 
    Color:#000; 
    font-size:large; 
    position:relative; 
    left:14px; 
} 

#contactarea p.tag 
{ 
    color:#000; 
    font-size:medium; 
    position:relative; 
    left:10px; 
} 

#leftnavigation ul 
{ 
    margin:0; 
    padding: 0; 
    list-style: none; 
} 
#leftnavigation ul li { 
    border-top: 1px solid #333; 
    border-bottom: 1px solid #111; 
} 
#leftnavigation ul li:first-child {border-top: none;} 
#leftnavigation ul li:last-child {border-bottom: none;} 
#leftnavigation ul li a 
{ 
    padding: 10px; 
    display: block; 
    color: #fff; 
    background-color:#222222; 
    text-decoration: none; 
} 
#leftnavigation ul li a:hover {background: #111;} 

#contentarea 
{ 
    border:1px solid blue; 
    min-height:500px; 
    float:left; 
    width:594px; 
    margin-left:5px; 
    margin-right:5px; 
} 

#advertisingarea 
{ 
    width:150px; 
    float:left; 
    min-height:500px; 
    background-image:url('images/advertisingAreaBackground.png'); 
    background-repeat:repeat-y; 
} 

.advert 
{ 
    height:190px; 
    overflow:hidden;  
} 

.advert img 
{ 
    padding:0; 
    margin:0; 
    position:relative; 
    left:25px; 
    top:5px; 
} 

.advert p 
{ 
    font-size:x-small; 
    font-family:Arial; 
    margin-left:8px; 
    margin-right:8px; 
    margin-top:5px; 
} 

<div id="body"> 
    <div id="leftcolumn"> 
     <div id="leftnavigation">    
      <ul> 
       <li><a href="#">Automoviles</a></li> 
       <li><a href="#">Clases y Talleres</a></li> 
       <li><a href="#">Electronicos</a></li> 
       <li><a href="#">Inmobiliaria</a></li> 
       <li><a href="#">Libros</a></li> 
       <li><a href="#">Musica, Peliculas y Juegos</a></li> 
       <li><a href="#">Ninos</a></li> 
       <li><a href="#">Otros</a></li> 
       <li><a href="#">Ropa</a></li> 
      </ul> 
     </div> 
     <div id="contactarea"> 
      <p class="heading">Anuncios Premium</p> 
      <p class="tag">Destaque sus anuncios con una cuenta premium!</p> 
     </div> 
    </div> 
    <div id="contentarea">sdfg<h1>asdasd</h1></div> 
    <div id="advertisingarea"> 
     <div class="advert"> 
      <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p> 
     </div> 

     <div class="advert"> 
      <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p> 
     </div> 

     <div class="advert"> 
      <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p> 
     </div> 
    </div> 
</div> 

Answer 1

Le plus simple est juste set the oveflow of the container:

#body 
{ 
    ... 
    overflow: auto; 
} 

Answer 2

Pour un div à « envelopper » autour des éléments qu'il contient vous devez faire flotter (float: left) si vous avez déjà flottaient d'autres éléments.

Pour que la div flottante soit centrée, la meilleure solution de navigateur croisé consiste à l'enrouler sur une autre div non flottante (invisible) et à centrer cette div. Quelque chose comme ceci:

<div id="centered"> 
    <div id="floated"> 
    </div> 
</div> 

De cette façon, vous pouvez avoir la div à l'intérieur d'envelopper les éléments qu'il contient tout en ne spécifiant aucune valeur hieght, alors que la div extérieure (invisible, juste avec une largeur) maintient centrée;)

Answer 3

vous devriez utiliser firebug pour résoudre les problèmes de css comme ceci. Vous seriez surpris de voir à quel point c'est utile.

En réponse à votre question - Il n'a pas de hauteur à cause des éléments flottants. Vous devez effacer les flottants dans cet élément pour que le parent s'affiche comme prévu. Vous pouvez le faire de plusieurs façons.

faire une classe claire et ajouter simplement comme un élément après les flotteurs:

<style> 
.clear{clear:both;} 
</style> 
<div class="parent"> 
    <div class="float_left">left</div> 
    <div class="float_right">right</div> 
    <div class="clear"></div> 
</div> 

une auto plus appropriée clair pour tout élément qui a une classe de « conteneur »:

<style> 
.container:after { 
content: "."; 
display: block; 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0; 
} 

.container { 
display: inline-block; 
} 

html[xmlns] .container { 
display: block; 
} 

* html .container { 
height: 1%; 
} 
</style> 
<div class="parent container"> 
    <div class="float_left">left</div> 
    <div class="float_right">right</div> 
</div>