Piè di pagina maligno...

[Daniele87]

Salve a tutti. Ho fatto il mio primo sito usando i div e i css al posto delle tabelle (con un piccolo aiuto di photoshop che mi ha creato la struttura base). Tutto va bene, meno un piccolo particolare che, se avrete la pazienza di seguire com'è strutturata la mia pagina, spero saprete risolvere.

Dunque, ho un div per l'intestazione, uno per la colonna di sinistra, quella di destra e il piè di pagina. In ciascun div ne sono annidati molti altri, ciascuno con una immagine di sfondo e posizionati coi css in modo tale da creare la grafica. La struttura quindi è questa:

<div id="container">


	<div id="top">
		<div id="annidato1"></div>
		<div id="annidato2"></div>
		<div id="annidato3"></div>
	</div>


	<div id="left">

		<div id="menubottom">titolo sezione</div>

		<div id="menubody">
			<ul>
			[*]voce del menu
			[/list]
		</div>


		<div id="menuclose1"></div>
		<div id="menuclose2"></div>

		<div id="left-banner">parte per i banner</div>

	</div>



	<div id="right">colonna destra per i banner</div>


	<div id="content">contenuti della pagina</div>
	

	<div id="down">
		<div id="casino-32"></div>
		<div id="casino-33"></div>
		<div id="casino-34"></div>
		<div id="casino-41"></div>
	</div>

</div>

Riporto qui parte del css per posizionare i div:

html,body {margin: 0; padding:0; height:100%;}

body {font-family: arial, sans-serif; font-size: 76%; text-align: center}


#container{position:relative; width: 781px; height: 100%;margin: 0 auto; text-align: left;}

body>#container{height:auto;min-height:100%;}


/* INTESTAZIONE */
#top {position:absolute; left:0px; top:0px; width:781px; height:210px;}

	#annidato1 {position:absolute; left:0px; top:0px; width:255px; height:59px; background: url(images/img_01.gif);}

	

/* MENU NAVIGAZIONE SINISTRA */
#left {position:absolute; width:171px; height:100% top:100px;}

	#menubody {position:relative; left:0px; top:210px; width:171px; height:auto; background: url(images/casino_22.gif) repeat-y top left;}
	

	#left-banner {position:relative; left:0px; top:200px; width:171px; height:267px;}

	/* idem per gli altri div annidati, sono simli */

/
* CORPO DEL TESTO */
#content {margin-top: 15em; margin-right: 11em; margin-left: 14em; height: 80%; padding: 30 1.5em 5em; padding-right: 0.5em;}


/* COLONNA DESTRA */
#right{margin-top: 18em; float: right; width: 11em; height: 98%; text-align: right;}


/* PIE' DI PAGINA */
#down {position:relative; left:0; top:-160; width:781px; height:0px;}

	#annidato3 {position:absolute; left:624px; top:0px; width:157px; height:25px; background: url(images/img_32.gif) no-repeat;}

	/* idem per gli altri div annidati, sono simli */

Dunque, il piè di pagina è correttamente posizionato in fondo e scende da solo se i contenuti della pagina sono molti o se ci sono tanti banner nella colonna di destra. Tuttavia, se aumento i contenuti della colonna di sinistra, il piè di pagina non scende e la colonna sinistra passa sotto di esso.
La (pessima) soluzione che ho trovato è che la colonna di sinistra deve essere sempre più corta o del testo della pagina o della colonna di destra.
Come faccio a fare in modo che il piè di pagina scenda anche all'aumentare del div a sinistra?
Spero che qualcuno capisca dove sbaglio. Grazie!

[urulela]

leggiti questo tutorial

http://www.subcide.com/tutorials/csslayout/index.aspx

[Daniele87]

Come dice nel tutorial, ho provato a impostare:

#left {float:left ; position:absolute; width:171px; height:100% margin-top:100px;}
#right{float:right ; margin-top: 18em; width: 11em; height: 98%;}
#down {clear: both ; position:relative; left:0; top:-160; width:781px; height:0px;}

Però non cambia proprio niente! Il #down dovrebbe scendere seguendo la colonna #left, invece vi rimane sopra!
Help!

[Mich_]

IL float con il position:absolute fanno a pugni.
Il position:absolute ti mette blocco fuori dalla successione logica dei blocchi, per cui anche il clear che sta sotto non lo rispetta.

Devi quindi togliere il position.

[Daniele87]

Grazie mille, Mich! In effetti bastava togliere il position:absolute!
Ora scende che è un piacere! Grazie ancora. Ciao ciao!