Torna al corso

Corso per creare siti web con HTML e CSS

Realizato da

Pubblicato il

html

css

corso

gratuito

italiano

web

developer


Ciao a tutti e benvenuti in questa nuova parte del corso per front-end developer su come affiancare diversi elementi orizzontalmente in HTML e CSS. Vediamo subito un esempio di cosa andremo a creare:

come affiancare, allineare orizzontalmente dei div in HTML con CSS

Come potete vedere dall’immagine andremo a creare una serie di 3 div, che verranno allineati uno a fianco all’altro. Ottenere questo effetto è semplicissimo, quindi senza altre esitazioni andiamo a vedere come ottenerlo.

Come allineare dei div che sono uno sopra all’altro

Come potete immaginare per creare questi tre elementi avremo bisogno di 4 div:

  • 1 div per contenere il tutto
  • 3 div per le varie sezioni (skills)

Il codice HTML per realizzare questo layout è del tipo:

<div id='skills-section'>
    <!-- solito container -->
    <div class="container">
        <h3>I miei servizi</h3>
        <div id='skills'>
            <div class="skill">
                <h4>Web design</h4>
                <p>Lorem</p>
            </div>
            <div class="skill">
                <h4>Web marketing</h4>
                <p>Lorem</p>
            </div>
            <div class="skill">
                <h4>Branding</h4>
                <p>Lorem</p>
            </div>
        </div>
    </div>
</div>


Se andiamo però a visualizzare questo codice nel nostro browser noteremo che i tre div sono posti uno sopra l’altro. Questo succede perché in HTML, la regola CSS default per il layout dei div è:

display: block;


Quando un elemento ha display block, questo occuperà una intera linea nel browser non permettendo ad altri elementi di posizionarsi sulla stessa linea.

Per ora i nostri div sono posizionati in questo modo:

come affiancare dei elementi in html e css per metterli sulla stessa linea

allineare div uno a fianco all’altro con CSS

Adesso andiamo passiamo al codice CSS.

Questo è il codice CSS utilizzato per questo esempio (non includendo regole non pertinenti):

#skills-section{
text-align: center; /*contenuto centrato*/
margin-top: 50px; /*spazio superiore*/
}
.skill{
/*larghezza dei div skill, in pagina ne abbiamo 3 quindi 100 / 3
lasciando un po' di spazio per i margini
*/
width: 28%;
display: inline-block; /*questi div saranno posti uno a fianco all'altro*/
margin: 2%; /*un po di spazio tra i div*/
color: #2d3e50;
}


Analizziamo questo codice. La regola più importante per ottenere l’effetto dei div allineati orizzontalmente è:

display: inline-block;


Questa regola viene applicata a tutti gli elementi con classe = skill, che abbiamo assegnato ai div da allineare. (vedere codice HTML)

Gli elementi con display: inline-block vengono posizionati sulla stessa linea a patto che ci sia abbastanza spazio. Per questo dobbiamo specificare una larghezza per i div, in modo da farli entrare tutti sulla stessa linea.

Siccome abbiamo 3 div da allineare, possiamo avere una larghezza di ~30%

Il motivo per cui andiamo ad utilizzare una larghezza di 28% dello schermo e non 33% (100 / 3) è perché dobbiamo lasciare un po’ di spazio per i margini.

Se non teniamo contro dei margin, probabilmente non vi sarà abbastanza spazio sullo schermo per allineare il tutto, ed uno dei div andrà a posizionarsi sotto agli altri.

Ora possiamo applicare alcune regole di stile e ci siamo! Abbiamo ottenuto dei div allineati orizzontalmente uno affianco all’altro. Aggiungiamo questo codice a quello delle lezioni precedenti ed otteniamo una cosa del genere.


Grazie per aver seguito questa parte della guida per font-end developer su come affiancare dei div utilizzando HTML e CSS. Se avete qualche domanda su questa guida o problemi con la codifica in generale, commentate in basso e vi risponderò immediatamente :)

Ci vediamo alla prossima parte del corso :)