Problema nel posizionare i div id

[Barry]

Ciao,
sto creando un tema per wordpress e come avete letto nel titolo ho problemi nel posizionare i div id, precisamente main, content e sidebar.
Ho notato questo problema quando ho ispezionato gli elementi direttamente da google chrome.
------Questo è lo screenshot------
http://awesomescreenshot.com/09b9fpq54

nel codice html il main è il contenitore del content e della sidebar, mentre nello screenshot il main non si espande fino alla fine dei contenuti.Ho provato ad aggiungere al main position: relative e al content e sidebar position:absolute ma facendo così mi si alza il footer sopra al main e da li non si sposta più.
Questo è il css che ho adesso

/*########## BODY ##########*/
body {
	margin: 0px;
	padding: 0px;
	background: #eee url(img/bg-body.jpg) repeat left top;
	color: #4E4E4E;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 22px;
}
#wrapper {
	width: 100%;
}
#header {
	height: auto;
	background: #000;
}
#content-header {
	position: relative;
	width: 960px;
	height: 100px;
	margin: 0 auto;
}
#main {
        width: 980px;
	margin: 20px auto;
}
#footer {
	clear: both;
	height: auto;
}
#logo {
	position: absolute;
	left: 0;
	bottom: 15px;
	width: auto;
}
#logo h1 {
	float: left;
	font-size: 36px;
	color: #FFF;
	width: auto;
	text-decoration: none;
	margin: 10px 0;
}
#logo h3 {
	width: auto;
	margin: 0px;
	padding: 10px 0 0 0;
	font-size: 12px;
	font-weight: normal;
}
.menu-top {
	position: absolute;
	right: 0;
	bottom: 15px;
}
#main-menu {
	background: url(img/main-menu.png) repeat-x;
	height: 40px;
}
#content {
	width: 650px;
	float: left;
}
.content-t {
	background: url(img/content-t.png) no-repeat;
	height: 16px;
	width: 650px;
}
.content-c {
	background: url(img/content-c.png) repeat-y;
	padding: 1px 30px;
}
.content-b {
	background: url(img/content-b.png) no-repeat;
	height: 16px;
	width: 650px;
}
#sidebar {
	width: 250px;
	float: right;
}
.sidebar-t {
	background: url(img/sidebar-t.png) no-repeat;
	height: 15px;
	width: 250px;
}
.sidebar-c {
	background: url(img/sidebar-c.png) repeat-y;
	padding: 1px 10px;
}
.sidebar-b {
	background: url(img/sidebar-b.png) no-repeat;
	height: 15px;
	width: 250px;
}

Spero di essermi spiegato!!

[mucu]

ti manca un clear del float
ci sono tante tecniche apllicabili basta cercare sul forum o nelle guide e poi scegliere la tua
magari ti basta aggiungere a #main
display: inline-block

[Barry]

grazie mille ho aggiunto al main class="clearfix"!!
Come avrai notato sono proprio alle basi nel css e ti vorrei chiedere se sai perchè il body e il wrapper (che sono i contenitori di tutto) non finiscono alla fine delle pagina ma solo alla riga del footer?

[mucu]

appunto perchè il contenuto finisce con il footer
per ovviare dovresti guardare alla proprietà height e min-height
con tutte le ripercussioni che ne derivano dall'uso dei vari doctyype sui più vari browser

[Barry]

esatto!! però ad esempio l'immagine di background del body si ripete per tutta la lunghezza dello schermo mentre se lo selezioni la selezione finisce appena dopo il footer simile al problema precedente del main.
Poi adesso ho notato che se imposto il footer sempre in fondo alla pagina, come viene spiegato in questo sito, la selezione del footer esce dal body come se fosse fuori dal body!
capito???
questo lo si vede sia da Firebug che da ispeziona elemento di google chrome.