problema posizione bottom immagini in un div

[marcopaolo79]

Ciao a tutti sono un programmatore e non mi sono mai occupato di diciamo grafica e css ma ho iniziato piano piano studiando qua e la.
Ho un problema che non so se è di concetto, nel senso ho sbagliato ad impostare la cosa o se è di conoscenza ovvero non so come si fa.
Cerco di essere chiaro e di spiegarmi.

Ho creato un div contenitore per mettere la mia grafica al centro della pagina così:

#container {
	width:1200px;
	margin:0 auto;
}

dentro al contenitore ho inserito un div contenuto così:

#content {
	width:1200px;
	margin:0;
	background-color:#FFFFFF;
	float:left;
}

dentro al contenuto ho creato 3 div che identificano 3 colonne una accanto all'altra ovvero colonna sinistra, colonna centrale e colonna destra così:

#content .col-sx {
	width:480px;
	margin:0;
	float:left;
}

#content .col-cx {
	width:626px;
	margin:0;
	float:left;
}

#content .col-dx {
	width:94px;
	margin:0;
	float:left;
}

sotto alle 3 colonne c'è il div del menù, così:

#content .menu {
	width:1200px;
	height:50px;
	float:left;
	background-color:#952744;
}

nella colonna centrale ci sarà il materiale del sito: testi, foto e quant'altro e in base a quanto materiale sarà presente, questa colonna sarà alta un tot di pixel (variabile) e "spingerà" verso il basso il div del menù.
E fin qua tutto perfetto o per lo meno mi funziona tutto.

Adesso il problema mi si pone sulle colonne sinistra e destra perchè in queste 2 colonne ho un'immagine (una per la colonna sinistra e una per la colonna destra) che devono sempre stare in fondo a tutto.
Cioè la colonna centrale è alta 300 pixel bene le immagini devono stare in fondo a 300 pixel, se la colonna è alta 200 pixel devono stare in fondo a 200 pixel ma ovviamente io non so prima quanti pixel è alta la colonna centrale.
Si può fare una cosa del genere oppure devo impostare la cosa in modo diverso?

<div id="container">
	<div id="content">
			
		<div class="col-sx">
			[img]images/immagine1.jpg[/img]
		</div>
		
		<div class="col-cx">
			contenuto
contenuto
contenuto
contenuto
contenuto
contenuto
contenuto

			contenuto
contenuto
contenuto
contenuto
contenuto
contenuto
contenuto

			contenuto
contenuto
contenuto
contenuto
contenuto
contenuto
contenuto

			contenuto
contenuto
contenuto
contenuto
contenuto
contenuto
contenuto

			contenuto
contenuto
contenuto
contenuto
contenuto
contenuto
contenuto

		</div>
		
		<div class="col-dx">
			[img]images/immagine2.jpg[/img]
		</div>
		
		<div class="menu">
			menu menu menu
		</div>

		
	</div>

</div>

[Experiment8]

se non hai bisogno di avere l'immagine html puoi metterla come background posizionandola al bottom, altrimenti puoi dare position: relative; alla colonna e position: absolute all'immagine (settando però le dimensioni esatte della stessa o non la vedrai), settandoli un bottom: 0.
Infine dovrai solo dare un padding bottom ala colonna pari all'altezza dell'immagine contenuta, in modo che il contenuto non interferisca con la stessa.

[lucavizzi]

Non è possibile, con i CSS, fare espandere le colonne laterali in base all'altezza della colonna centrale (non con i CSS versione 2 almeno, ma credo nemmeno con la versione 3).
Potresti usare i due contenitori, container e content, per visualizzare le immagini (Non capisco l'utilità del secondo, anche se torna comodo per i due background...)

#container {
    width:1200px;
    margin:0 auto;
    background:url('immagine/sinistra.jpg') bottom left no-repeat;
    height:auto;
    overflow:auto;
}
#content {
    width:1200px;
    margin:0;
    /*background-color:#FFFFFF;*/
    float:left;
    background:#fff url('immagine/destra.jpg') bottom right no-repeat;
    height:auto;
    overflow:auto;
}