Lunghezza di un div in fixed with

[silvestriweb]

Ciao a tutti ragazzi, vi mostro subito il mio problema sperando che mi aiuterete perchè tra poco mi butto giù!



Come potete vedere dall'immagine, io ho una struttura FIXED WITH dove non riesco purtroppo ad allungare il div di sfondo per farlo arrivare fino al footer e quindi comprendere tutto il contenuto.

La struttura è questa:

MainContent che include
Middle (ossia l'immagine di sfondo orizzontale che si ripete) che include
Content che include
Sidebar1 (Sinistra) Blog (Centro) (Sidebar2) destra.

A loro volta sidebar 1 e 2 includono
SIDEBAR_TITLE e SIDEBAR_CONTENT

Invece, Blog include
BLOG_TITLE e BLOG_CONTENT.

Il mio problema è questo:
QUANDO AGGIUNGO CONTENUTO A BLOG_CONTENT, il middle si allunga.
QUANDO AGGIUNGO CONTENUTO ALLA SIDEBAR, il middle NON si allunga, facendo rimanere un fastidioso NIENTE fino alla sidebar (vedi foto postata prima).

Spero che mi riusciate ad aiutare.. vi posto una parte del CSS:

@charset "UTF-8";
/* CSS Document */

body {
	background-image:url(img/background.gif);
	background-repeat: repeat;
	background-color:#2b4f59;
}

#mainContent {
	height:auto;
	width: 949px;
	margin-top:20px;
	margin-bottom:20px;
	margin-right:auto;
	margin-left:auto;
}

#header {
	background-image:url(img/header.png);
	width:949px;
	height:155px;
	margin: 0 auto;
}

#middle {
	background-image:url(img/middle.png);
	width:949px;
	height:auto;
	margin:0 auto;
}

#footer {
	background-image:url(img/footer.png);
	width:949px;
	height:36px;
	margin:0 auto;
	clear:both;
}

#content {
	width: 900px;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	background-color: #262121;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
	clear: left;
}

#sidebar_1 {
	width: 200px;
	height: auto;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
	float:left;
}

#flashAnimation {
	width: 485px;
	height: 150px;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
	margin: 0 207px;
}

#sidebar_2 {
	width: 200px;
	height: auto;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
	float:right;
}

#sidebar_top_1 {
	background-color:#936;
	width:194px;
	height:auto;
	margin: 2px auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #FFF;
	border: 1px solid black;
	text-align: center;
}

#sidebar_top_2 {
	background-color:#936;
	width:194px;
	height:auto;
	margin: 2px auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #FFF;
	border: 1px solid black;
	text-align: center;
}

#sidebar_content_1 {
	background-color:#333;
	width:194px;
	height:auto;
	margin: 2px auto;
	font-family: Verdana, Tahoma, Geneva;
	font-size: 12px;
	color: #FFF;
	border: 1px solid black;
	padding-left:2px;
}

#sidebar_content_2 {
	background-color:#333;
	width:194px;
	height:auto;
	margin: 2px auto;
	font-family: Verdana, Tahoma, Geneva;
	font-size: 12px;
	color: #FFF;
	border: 1px solid black;
	padding-left:2px;
}

[silvestriweb]

Grazie lo stesso, ho risolto seguendo un suggerimento di dreamweaver:

ho aggiunto <br class="clearfloat" /> prima della chiusura del content. Il css è questo:

.clearfloat { /* questa classe deve essere inserita in un elemento div o break e deve essere l'elemento finale prima della chiusura di un contenitore che deve contenere per intero un elemento mobile */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}