Non è difficile ma devi contare i pixel, se ne metti troppi poi gli ultimi scivolano sotto.
Comunque ecco come:
diciamo che crei un tuo layer contenitore della struttura, diciamo largo 700 pixel.
Codice:
#contenitore {width: 700px;}
poi ti crei il modello base dei box da inserirci dentro:
Codice:
#contenitore .box {
width: 200px;
float: left;
}
è importante che siano flottanti!
A questo punto il codice xhtml che li contiene:
Codice:
<div id="contenitore">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Tieni presente che è un layout di base e ridotto all'osso, i box saranno senza bordo quindi non li vedrai, non hanno un'altezza predefinita quindi fino a quando non ci metti qualcosa dentro non si vedranno.
Sono 3 larghi 200 pixel l'uno, quindi in tutto 600 pixel, hai ancora 100 pixel da giocare con i margini, ovviamente, è solo un esempio, puoi allargare o restringere a piacere, solo conta i pixel.
Il bordo va contato, con IE è un casino, il box model è differente e anche con Firefox i margini adiacenti collassano, in altre parole devi sempre fare un po' di prove, ma la tecnica è quella che ti ho descritto, il trucco è nel float.
