Blog

Come allineare due div

Questo esempio pratico spiega come eseguire l'allineamento di due campi di testo.

Come allineare due div

Con questo esempio pratico si vuole mostrare come eseguire l'allineamento di due box (in questo caso useremo dei tag div). Per "allineare" si intende posizionare i due box uno accanto all'altro, in orizzontale, tenendo conto che essi avranno la stessa altezza.

Foglio di stile

div#container {
	width: 90%;
	border: 1px solid #000;
	text-align: center;
}
div.split2 div {
	float: left;
	width: 50%;
}
div.wide {
	clear: left;
}


HTML Code

<div id="container">
<div class="split2">
   <div>
      <h1>Titolo della colonna 1</h1>
      <p>Il contenuto della prima colonna.</p>
   </div>
   <div>
      <h1>Titolo della colonna 2</h1>
      <p>Il contenuto della seconda colonna.</p>
   </div>
</div>
<div class="wide"><p>Questo div ha un clear impostato per evitare che subisca il float delle due colonne di testo.<br />
   <a href="https://www.icelab.eu/blog/css-4/come-allineare-due-div-4.htm">View full example</a></p></div>
</div>

2 commenti

  1. Sebastian21 dicembre 2010, 12:19:47

    Grazie, molto utile! :-)

  2. Loris.genetti21 dicembre 2010, 14:29:05

    @Sebastian: figurati, è un piacere essere d'aiuto!

Solo gli utenti registrati possono lasciare commenti.

© Copyright ©2008-2019. Tutti i diritti riservati.