Non sempre quando dobbiamo disporre degli elementi in orizzontale troviamo la via più semplice.Oggi vediamo un tutorial dove vedremo un buon metodo per disporre dei div in orizzontale, in modo da ottenere questo risultato:

Innanzitutto dobbiamo scrivere il codice HTML, per il div wrapper e poi al suo interno i  div che dovremmo disporre in modo orizzontale.
<div id="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
Lasciando le cose così come stanno i div saranno posizionati uno sotto l’altro. Quindi dobbiamo utilizzare il codice CSS per disporli in orizzontale.

Intanto dobbiamo impostare la larghezza e l’altezza del div contenitore (wrapper):

#wrapper{
width:320px;
height:60px;
background:#EFEFEF;
}

Poi dovremo definire le proprietà della classe .section, in questo modo:

.section{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}

Ora siamo in questa situazione:

Come vedi il primo div ha un margine sinistro di troppo, che bisogna rimuovere. Per risolvere questo problema utilizzeremo il selettore firt-child, che permetterà di prendere il primo div contenuto nel div “wrapper”, e poi assegneremo il valore 0 a margin-left

#wrapper div:first-child{margin-left:0px;}

In questo modo otteniamo il risultato desiderato:

Questo selettore, tanto per cambiare, non è supportato da internet explorer 6. La soluzione è utilizzare i commenti condizionali per uno specifico foglio di stile CSS, dove dovrai aggiungere una nuova classe con la proprietò margin-left settata a 0.

Fonte e immagini: Woork

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Dal Template Photoshop Al Codice HTML CSS: 4° Aggiornamento

Nuovo aggiornamento per l'articolo iniziato tempo fa dove raccolgo i migliori tutorial in italiano e in inglese per realizzare il template in...

Dal Template Photoshop al Codice HTML CSS: 3° Aggiornamento

Come promesso tempo fa, la lista di guide su come realizzare il template in photoshop e passare al codice HTML/CSS continua ad aggiornarsi, con questi...

Dal Template Photoshop al Codice HTML CSS: 2° Aggiornamento

Oggi ti segnalo un altro tutorial su come passare dal template photoshop al codice HTML CSS, di Six Revisions, da aggiungere alla lista che ho stilato...