div che cambiano di altezza in base al contenuto

[dimiandre]

ciao a tutti, sto cercando di creare un nuovo template pr il mio sito, basato su wordpress. Il mio sito ha queta struttura:

<div id="wrapper">
<div id="header">
Head
</div>
<div id="centro">
<div id="contenuto">
Loop Articoli
</div>
<div id="sidebar">
Side
</div>
</div>
<div id="footer">
Footer
</div>
</div>

Alla sidebar ho dato il float right, e al contet il left, vorrei fare in modo che il "centro" aumentasse altezza in base alil contenuto..
Metto il link della sckin così che possiate vedere cosa ho fatto più specificatamente www.floop.it/skin/

Grazie dell'aiuto

[fcaldera]

cerca 'float clearing' nel forum e/o su google

[dimiandre]

humm ho messo il clear al footer, ma non è cambiato nulla

ecco come è ora il mio css:

/*   
 Theme Name: Floop Theme
 Theme URI: [url]http://www.floop.it[/url]
 Description: Tema creato per floop.it
 Author: Andrea Di Michele
 Author URI: [url]http://www.floop.it[/url]
 Version: 0.1
 .
 Copyright (C) 2010 Floop.it.
 .
 *
 */
@import url(menu_style.css); 

body {
height: 100%;
margin-top: 20px;
background: #000000 url(./images/bg.jpg); 
background-repeat: repeat-x;
}
html {
height: 100%;
}

#wrapper {
float: center;
width: 870px;
margin: 0 auto; 
}

#header {
height: 140px;
width: 100%;
background-image: url(./images/header.png);
}

#social {
height: 24px;
width: 160px;
float: right;
margin-top: 112px;
}

.imgsocial{
margin-left: 3px;
}

#menucont {
height: 30px;
width: 100%;
}

#centro {

background-color: blue;
}

#content {
background-color: white;
width: 685px;
float: left;
}

#sidebar{
background-color: white;
float: right;
width: 185px;
}

#footer {
height: 5px;
width: 100%;
background-color: white;
clear: both;
}

.widget {
width: 175px;
margin-top: 20px;
}

.titolo_widget {
background-image: url("images/widget_title.png") ;
height: 30px;
border: none;
} 

[dimiandre]

scusate il doppio post, ho fatto delle modifiche e ora sono in questa situazione:

<div id="wrapper"> 
 <div id="header"> 
<div id="social"> 
immagini social network
</div>
header 
 </div> 
 
 <div id="menucont"> 
 <ul id="menu"> 
 menu
 </div> 
  
 
 
 <div id="content"> 
main content, rosso dove vanno gli articoli</div> 
 
<div id="sidebar"> 
Sidebar con relativi widget
</div> 
 
 
 
 <div id="footer"> 
footer
  </div> 
 
  </div>

,
e si presenta così: www.floop.it/skin/
come vedete sotto al content c'è un "buco", io vorrei che non ci fosse quel buco e che i div della sidebar e del content fossero della stessa altezza, in base a quello più alto..
non so come fare..

grazie mile dell'aiuto

[morfina]

potresti dare un background-color al wrapper.

[dimiandre]

potrebbe essere una soluzione, ma dopo in alto nell'header che ci sono i bordi arrotondati mi tornerebbe bianco, bruttissimo...