Forum libero

In questo layout in costruzione ho evidenziato in rosso due DIV che contengono elementi per cui è definita la proprietà float.

La prima DIV.content (sfondo rosso) contiene DIV.main con float: left (sfondo bianco) e DIV.ads con float: right (sfondo trasparente).

La seconda DIV a sfondo rosso contiene due paragrafi rispettivamente con float: left e right.

Perché mai gli elementi contenuti escono fuori dalla DIV contenitrice invece di allargarla alla propria altezza?
Come si fa a fare in modo che la DIV contenitrice si allarghi all'altezza del contenuto?

Es. la prima delle due:

<div class="content"><div class="padding" style="background: red">

<div class="main"><div class="padding">

[...]

</div></div> <!-- main -->

<div class="ads"><div class="padding">

[...]

</div></div> <!-- ads -->

</div></div> <!-- content -->

DIV.content {
width: 966px;
margin-left: auto;
margin-right: auto;  /* centers the DIV in Mozilla, Opera */
}

DIV.content DIV.padding {
padding-top: 20px;
padding-bottom: 20px;  /* added to see the DIV */
}

DIV.main {
float: left;
width: 676px;
background-color: #F8F6F4;
}

DIV.main DIV.padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
padding-right: 20px;
}

[...]

DIV.ads {
float: right;
width: 290px;
}

DIV.ads DIV.padding {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 40px;
}

Appoggio qui per domani.