Posizionare due div uno accanto all’altro utilizzando float CSS
Per poter posizionare due div uno accanto all’altro è necessario utilizzare la proprietà float del linguaggio CSS. Di seguito un breve esempio utile a capire meglio le sfaccettature di questa caratteristica CSS.
Primo Passo: creare il file HTML a cui associare le regole CSS
Posterò un file HTML di esempio contenente solo i due div necessari a spiegare l’utilizzo della proprietà float:
<!doctype html>
<html lang="it">
<head>
<title>Due div uno accanto all'altro</title>
</head>
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>
Secondo Passo: utilizzare la proprietà Float CSS
Adesso per poter raggiungere l’obiettivo che ci siamo preposto è sufficiente utilizzare la proprietà float con l’aiuto di width. L’utilizzo combinato delle due proprietà è alla base dell’utilizzo del CSS e della generazione dei fogli di stile per lo sviluppo web. Di seguito il file css:
.div-1{width:50%;float:left;}
.div-2{width:50%;float:left;}
Queste due semplici regole CSS danno come risultato proprio due div uno accanto all’altro. Ovviamente noi abbiamo preso in esame solo due elementi, ma il discorso si estende anche nel caso in cui ci siano più elementi. L’importante è che la somma delle proprietà width degli elementi non superi il 100%.
Qui in basso, invece, potrai vedere il risultato visivo della combinazione del nostro codice html/css.
NOTA: Abbiamo aggiunto un’altezza di 35px e un colore di sfondo ad entrambi i div per poterli visualizzare meglio. Per cadere in equivoci posto anche il codice completo del css:
.div-1{width:50%;float:left;min-height:35px;background:#b92424;}
.div-2{width:50%;float:left;min-height:35px;background:#267126;}