Div has no height unless I give it a minimum height

Question

I think this is because I float all three “div” columns to the left, inside the main div of the body.

How can I say that the div of the main body expands as much as necessary to fit the contents of the div?

Here it is with a minimum height:

And with the minimum height removed:

Here is my relevant code.

#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

The easiest way is to install the oveflow container :

#body
{
    ...
    overflow: auto;
}

Answer 2

In order for the div to “wrap” around the elements it contains, you must float (float: left) if you have already floated other elements.

div - -floated div () div. - :

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

, div, , hieght, div (, ) ;)

Answer 3

firebug , this. , .

- - . , . .

float:

<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>

, "":

<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>