CSS: Posizionare due div, o elementi, opposti sulla stessa riga con la proprietà float

In altri termini, un elemento di blocco, si sussegue in verticale con un altro. Nell' articolo di oggi, invece, posizioneremo su una stessa linea 2 DIV, ma opposti l' uno all' altro, per far meglio comprendere l' esempio. Una breve introduzione per spiegare quello che otterremo: avremo un elemento contenitore "generale" ed al suo interno i nostri elementi di blocco. Ecco il codice CSS:

html, body{
margin:0; 
padding:0; 
font-family: "Trebuchet MS", Georgia, Arial, sans-serif; 
font-size:100%;> 
text-align:center; 
}
  
#container /* il contenitore generale */
{ 
margin:30px auto; 
padding:0; 
background:#8a9;
height:7em; 
line-height:7em;
} 

Dopo aver impostato a zero margini e padding per il body e l' elemento radice html, il contenitore generale non presenta particolari dichiarazioni. Da notare l' altezza, che è stata settata con una misura relativa; in effetti essa è pari a 7em. La sua interlinea uguale all' altezza per avere il testo allineato perfettamente al centro, in verticale.

Cosa significa avere l' altezza di un elemento impostata in em: le unità di misura relative esprimono lunghezze calcolate in realzione ad altre. Nel nostro esempio il valore dell' altezza è calcolato in relazione a quello della proprietà font-size dichiarata per body ed html. Proseguiamo con il codice:

.sin{ 
margin:0; 
padding:0; 
width:200px; 
background:transparent;float:left; 
} 
.sin h3{   
margin:0;   
padding:0 0 0 10px;  
font-size: 1.2em;   
color:#fff;
} 

Per l' elemento di sinistra ho utilizzato una classe ma avrei potuto benissimo implementare un elemento univoco. Questo per fare in modo che all' interno della stessa pagina, possa essere richiamato più volte. Il colore di sfondo è impostato su "transparent"; in pratica eredita quello del suo genitore, cioè di container. In grassetto ho scritto la proprietà che fa rimanere a sinistra il primo elemento: float:left. Essa fa "flottare" l' elemento nella direzione dichiarata nel codice: a sinistra per questo elemento. Adesso vediamo il codice per l' altro:

.des{ 
margin:0; 
padding:0; 
width:200px; 
background:transparent;     float:right;     text-align:right; 
} 
.des h3{  
margin:0;   
padding:0 10px 0 0; 
font-size: 1.2em;  
color:#fff;   
} 

Assimilato il concetto per il box di sinistra, il codice per quello di destra risulta molto semplice ed intuibile: mantenendo le stesse caratteristiche per le misure, questo elemento di blocco è stato "spostato" a destra, grazie alla proprietà float:right. È solo questa che ci fa visualizzare due elementi di blocco sullo stesso livello. Un' ultima e piccola considerazione: siccome sappiamo che, per impostazione predefinita, l' allineamento del testo in un elemento è a sinistra, per dare un piccolo effetto di precisione ho allineato il testo a destra nel secondo blocco attraverso la proprietà text-align:right. I titoli hanno la stessa distanza dal lato sinistro e destro, impostando il padding a 10px rispettivamente da sinistra per .sin h3 e da destra per .des h3. Nella pagina html basterà scivere in questo modo i 3 elementi:

<div id="container">
<div class="sin"><h3>Contenitore di sx</h3></div>
<div class="des"><h3>Contenitore di dx</h3></div> 
</div>

Dopo tutte queste righe di codice, possiamo vedere il file di esempio ottenuto.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati