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ì:
codice:
#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)