Layout a tre colonne fluido - problema

[dvd810]

Salve.
Un piccolo problema con un layout a 3 colonne composto da 5 div: header, footer e ler tre colonne centrali.
Tutto funzionante, ma quando riduco la dimensione della finestra dopo una certa larghezza, il div di destra viene spostato sotto, perdendo la corretta impostazione del Layout.
Ho dimenticato qualcosa?

Questo il link
[URL=http://www.hondaintegra.altervista.org/]

Qui i css

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: #CCC;
}


#container {
	background-color:#000;
	text-align:center;
}

#header {
	height:130px;
	background-color:#333;
	border:1px solid #999;

}
 
#content {
	height:460px;
	width:53.5%;
	background-color:#333;
	border:1px solid #F60;
	float:left;
}

#sidebar_left {
	width:23%;
	height:460px;
	background-color:#333;
	border:1px solid #999;
	float:left;

}
 
#sidebar_right {
	width:23%;
	height:460px;
	background-color:#333;
	border:1px solid #999;
	float:left;
	
}

#footer {
	width:100%;
	height:80px;
	background-color:#333;
	border:1px solid #999;
	clear:both;
}

Grazie a tutti.

[Prill]

Ciao, i bordi vanno ad aggiungersi alla larghezza assegnata ai blocchi, se guardi il tuo footer, ti accorgerai che genera uno scrolling orizzontale perché la sua larghezza totale risulta del 100% + 2 pixel di bordo (1 a destra e uno a sinistra); allo stesso modo diventa difficile gestire le dimensioni degli altri box. Per evitare problemi possiamo eliminare i bordi sui div flottanti e inserirle invece su div interni ad essi per i quali potremo impostare con tranquillità anche margini e padding se vorremo.
Prova dunque a modificare la parte di css interessata così:

#content {
	height:460px;
	width:54%;
	background-color:#333;
	float:left;
}
#content #innerContent {
	height:458px;
	border:1px solid #F60;
}

#sidebar_left {
	width:23%;
	height:460px;
	background-color:#333;
	float:left;

}
#sidebar_left #innerLeft, #sidebar_right #innerRight {
	height:458px;
	border:1px solid #999;

} 
#sidebar_right {
	width:23%;
	height:460px;
	background-color:#333;
	float:left;
	
}

#footer {
	height:80px;
	background-color:#333;
	border:1px solid #999;
	clear:both;
}

(per il footer è sufficiente non specificare la larghezza se vogliamo lasciare i bordi su di esso)

e nel codice html inserisci all'interno di ciasscun div (sidebar_right, sidebar_left, content) i div interni che puoi rinominare come meglio credi (nell'esempio innerLeft eccetera)

[dvd810]

ciao grazie per la risposta.
ok il problema è imputabile ai bordi assegnati.
Pensavo di aver tenuto in considerazione questo fattore. Se noti il div centrale non è la sottrazione del 100% meno i due div spalla, proprio perchè ho tenuto conto dei bordi.
Quindi mi domando, perchè a finestra aperta non creano problemi e via via che si riduce invece si?

[Prill]

con firefox a me il div destro appare in basso già in apertura della pagina, senza zummare o ridimensionare la finestra: ho una risoluzione di 1024 e lo 0,5% che hai calcolato per me non è sufficiente essendo inferiore ai 6 pixel dei bordi (ma lo stesso problema si porrebbe anche a risoluzioni superiori quando non si naviga con la finestra massimizzata). Per questo hai bisogno di impostare i div con precisione, tutto ciò che può generare problemi (bordi, padding e margini eventuali) va affidato ai div interni.
Poi considera che quando usi lo zoom (non che uno apra una pagina e si diverta a ridurre e ingrandire di continuo, ma qualche volta, per rendere la lettura più agevole, può capitare) , anche quando in una pagina è tutto calcolato al pixel, il browser può non ridimensionare proporzionalmente i bordi e di qui un ulteriore sfasamento di qualche pixel che può portare a visualizzazioni inaspettate: motivo ulteriore per evitare in alcuni casi e quando si può i bordi direttamente su elementi con float

[dvd810]

grazie, è stato molto utile il tuo commento

[dvd810]

esiste un modo per non ridurre altre una dimensione minima il Layout?

[Prill]

Esistono le proprietà min-width e min-height, non riconosciute da versioni meno recenti di Explorer, ma se cerchi con Google trovi dei fix per il problema