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

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>Automoviles</li>
<li>Clases y Talleres</li>
<li>Electronicos</li>
<li>Inmobiliaria</li>
<li>Libros</li>
<li>Musica, Peliculas y Juegos</li>
<li>Ninos</li>
<li>Otros</li>
<li>Ropa</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">
<img src="../../Content/images/advertImage.png" alt="Advert" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
<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>