layout css..:cryy

[ant_alt]

ho realizzato un layout ..ma mi sa di non averlo fatto a dovere..
in pratica ho:


div#container {width: 350px;
________div#header {width:100%
________div#content {float:left; width:250px
________div#right {float:right; width:150px
________div#footer{width:100%

ki mi può aiutare?

quei float non mi convincono...praticamente a me serve un layout header-due colonne e footer..senza float ed elastici strani ..chiedo solo ke lo sfondo delle due colonne debba continuare fino al footer..(ma cm si fa? )

[seed_squall_it]

Non convincono neanche me quei float...infatti se li sommi, danno una larghezza totale di 400px!
Quindi presumo che ti vadano a finire uno sotto l'altro, dato che il container è largo 350px. A parte questo, per creare l'illusione (si tratta di un'illusione infatti) delle due colonne alte uguali, devi racchiudere i box flottanti in un ulteriore box (puoi usare anche container se vuoi). A questo box applichi un colore di sfondo (che sarà lo sfondo di una colonna) e un'immagine di sfondo larga tanto quanto l'altra colonna e ripetuta verticalmente (ovviamente posizionata a sinistra o a destra, a seconda di quale colonna deve essere lo sfondo). L'importante è che dopo i due box flottanti delle colonne e prima della chiusura del box che le contiene, tu applichi un elemento per ripulire il float e quindi ripristinare il flusso normale del documento. Puoi usare un
a cui applichi una classe che fa il clear: both per esempio. Ripristinando il flusso all'interno del box che contiene le colonne flottanti, lo forzi ad avere sempre la stessa altezza della colonna più alta, e quindi l'immagine di sfondo si adatterà sempre all'altezza complessiva, arrivando fino al footer.

PS: visto che hai un layout "pixel perfect", puoi anche dichiarare float: left entrambe le colonne, e quindi ripulire il float con clear: left. Rendere flottanti in direzioni opposte le colonne è utile soprattutto nei layout liquidi o in casi particolari in cui tra di esse ti serve un "franco". Nel tuo caso, è più semplice renderle flottanti entrambe a sinistra, anche se non è comunque sbagliato renderle flottanti in direzioni opposte.