Div doesn't have height unless I give it min-height.

Question

I think this is because I'm floating all three divs "columns" to the left, inside of the main body div.

How can I tell the main body div to expand as big as it needs to fit the content divs?

Here it's with min-height:

And here with the min-height taken away:

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 just to set the oveflow of the container:

#body
{
    ...
    overflow: auto;
}

Answer 2

For a div to "wrap" around the elements it contains you have to float it (float:left) if you have already floated other elements.

For the floated div to be centered the best cross-browser solution is to wrap it on another not-floated div (invisible) and center that div. Something like this:

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

This way you can have the inside div wrapping the elements it contains while not specifying any hieght value, while the outer div (invisible, just with width) keeps it centered ;)

Answer 3

you should use firebug to resolve css issues like this. You'd be surprised how useful it is.

In answer to your question - It has no height because of the floating elements. You need to clear the floats within that element for the parent to display as expected. You can do this a few ways.

make a clear class and simply add it as an element after the floats:

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

a more proper auto clear for any element that has a class of "container":

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