Io amo il layout con dimensione percentuale, detto anche layout liquido.

La soluzione più semplice e che magari è adottata da coloro che fanno da poco pagine web è usare un layout a tabella ma ciò è sbagliato semanticamente e dal punto di vista dell’accessibilità: la tabella indica dati, non layout!

Fino ad oggi ho usato Equal Height Columns with Cross-Browser CSS di Matthew James Taylor ma purtroppo non va bene in un caso che mi è proprio necessario: usare le PNG trasparenti rispetto a un container di livello superiore.

Infatti questo web designer sposta verso sinistra i div se vedete la descrizione, mentre io voglio spostare verso destra.

In realtà il mio obiettivo sarebbe riuscire a fare n colonne non influenzate tra loro ma mi sono accorto che con questo trucchetto che comunque mi va bene non ce la faccio, magari in futuro arriverà anche per questo la soluzione.

Ma veniamo alla soluzione: mantenendo lo stesso codice HTML (o meglio, rimuovendo col3 e container3 visto che lo faccio a due colonne) ho adottato i margini negativi.

Personalmente li preferisco al posizionamento relativo e sono comunque compatibili con i browser (ho trovato un articolo sui margini relativi che risaliva al 2006 che diceva che erano compatibili con i browser di allora, perciò anche con questi).

Il codice CSS è questo:

#container2 {
	float: left;
	width: 100%;
	overflow: hidden;
	background: yellow;
}
#container1 {
	width: 100%;
	float: left;
	margin-left: 70%;
	background: green;
}
#col1 {
	float: left;
	width: 70%;
	margin-left: -70%;
}
#col2 {
	float: left;
	width: 30%;
}

Su ogni colonna e sui container le proprietà float e quindi width sono impostate per dare il layout.

Su container2 è dichiarato overflow: hidden; per nascondere ciò che avanzerebbe di container1 che ha un margin-left pari alla larghezza della prima colonna.

Poi sui container sono dichiarati gli sfondi.

Infine su col1 ho dichiarato margin-left con il negativo della sua larghezza per spostare a sinistra le colonne che altrimenti sarebbero spostate a destra per il margin-left del container1.

Rispetto alla versione originale mancano poi il padding delle colonne creato attraverso la larghezza, cosa che non mi è mai piaciuta perché preferisco creare un div in più con il padding vero e proprio e poi manca anche l’overflow sulle colonne che è una cosa che serve solo a Internet Explorer, perciò vi consiglio di metterla con un commento condizionale.