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

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.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

Da Photoshop al Codice HTML Css: 5° Aggiornamento

Dopo tanto tempo ecco due nuovi aggiornamenti alla lista, iniziata tempo fa, sui migliori tutorial per passare dal template photoshop al sito html css...

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...