Posizione DIV

[xtommy2]

Allora una serie di contenitori:

#contenitore
altezza 450, larghezza 1000

che contiene:

#colonna_sinistra
altezza - , larghezza 500
float: left

#colonna_destra
altezza 450, larghezza 500
float: left

sotto #contenitore si trova:

#piede
larghezza 1000, altezza 50

Quando il contenuto di #colonna_sinistra determina un'altezza superiore a #colonna_destra succede che #piede si posiziona alla destra di #colonna_sinistra e sotto #colonna_destra, mentre io vorrei che si posizionasse sotto entrambi (infatti la sua larghezza equivale a colonna sinistra + colonna destra).

Cosa devo fare?

[fcaldera]

applica un clearing al contenitore (cerca nel forum)

quello più veloce consiste nel definire per #contenitore

height: auto
overflow: hidden;

[xtommy2]

non funziona....
Anzi, il piede mi si posiziona in alto, all'altezza delle due colonne

[xtommy2]

ho cercato ma non riesco a trovare la soluzione.

Allora, il mio schema dovrebbe essere il seguente:

[xtommy2]

mentre invece su explorer mi viene fuori in questo modo:

[xtommy2]

E su firefox in questo modo:

[xtommy2]

ops

[xtommy2]

Il codice utilizzato è il seguente:

#contenitore {
	margin: 3px 5px;
	width: 100%;
	height: 428px;
}



#colonna_sinistra {
	margin-right: 3px;
	padding: 3px;
	float: left;
	width: 490px;
	border: 1px ridge #DDECFF;
	text-align: left;
	display: block;
	background-color: #FAF5FF;
}

#colonna_destra{
	padding: 3px 18px;
	float: left;
	height: 420px;
	width: 350px;
	border: 1px ridge #DDECFF;
	text-align: left;
	display: block;
	background-color: #FAF5FF;
}

#piede {
	margin: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #9CBABD;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-color: #EFF3F7;
	vertical-align: middle;
	width: 900px;
}

[xtommy2]

su firefox ho risolto inserendo:

clear: both

su #piede, ma su explorer non c'è verso.

[pic1]

Una regola indispensabile per un layout stabile

Arrivati a questo punto bisogna considerare la lunghezza relativa delle colonne. Infatti, se la colonna di navigazione risulta più lunga si ottiene che il footer si dispone appena sotto i contenuti e non sotto la colonna secondaria, causando un effetto non proprio piacevole: la navigazione si sovrappone al footer.

Per sistemare le cose basta una semplice regola, si fa in modo che il footer non abbia elementi float alla sua destra attraverso la proprietà clear:

div#footer{
clear: right
}

Con l'aggiunta di questa semplice riga di codice abbiamo sistemato le cose.

tratto dalla lezione 19 "guida layout dei siti con i css"

http://css.html.it/guide/lezione/68/...-con-il-float/

non sono un esperto ma penso potrebbe servirti