Il comportamento di un elemento di blocco, sia esso un contenitore, un titolo, un paragrafo ecc, è noto: esso genera una "nuova riga" sia prima e sia dopo il suo riquadro, quando si trova nel flusso normale della pagina.
Nell'articolo in oggetto verrà spiegato come fare per avere due elementi di blocco sullo stesso piano. Con la proprietà float e CSS Flexbox.
Posizionare due elementi di blocco sullo stesso piano con la proprietà float
Il risultato che otterremo è uguale a all'immagine postata all'inizio dell'articolo. Un contenitore generale ed altri due, opposti, sullo stesso piano.
Il codice HTML
<div class="container"> <div class="sinistro">Div sx</div> <div class="destro">Div dx</div> </div>
Il codice CSS
Passiamo al codice CSS. Impostiamo prima il codice dell'elemento contenitore.
.container{
max-width:800px;
margin:30px auto;
background:lightgrey;
height:200px;
line-height:200px;
overflow: hidden;
}
Il contenitore non presenta alcun codice particolare. Tali misure possono essere tranquillamente cambiate a seconda delle proprie esigenze.
Il codice CSS in comune per i due elementi interni:
.sinistro, .destro {
margin:0;
padding:0;
width:200px;
height:200px;
background:cornflowerblue;
text-align:center;
color: #fff;
font-size:30px;
}
In ultimo abbiamo le due dichiarazioni più importanti, distinte e separate:
.sinistro{float:left;}
.destro{float:right;}
Queste condizioni fanno in modo da "spingere" verso destra, o verso sinitra, gli elementi ai quali la proprietà viene assegnata.
Il risultato sarà del tutto simile all'immagine di seguito riportata:
Se volessimo rendere flottanti due elementi "in linea", come uno span, img ecc. ci si deve ricordare di renderli come elementi di blocco. Esempio:
img-sx{display:block; float:left;}
img-dx{display:block; float:right;}
Posizionare elementi di blocco sullo stesso piano con CSS Flexbox
Oltre alla proprietà float, è possibile utilizzare il modulo CSS Flexible Box e, nello specifico, la proprietà display: flex.
L'immagine alla fine della pagina mostra il risultato.
Il codice HTML per la proprietà display:flex
<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> </div>
Il codice CSS
Il codice CSS cambia in maniera radicale rispetto a quello visto per il primo esempio. Infatti abbiamo:
.flex-container{
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
width: 800px;
height: 200px;
background-color:lightgrey;
margin:30px auto;
}
display:flex è il valore della proprietà display con cui si imposta il contenitore flessibile.
Onde evitare di dilungarmi nella spiegazione del "Flexible box", possiamo asserire che tale modulo dei CSS consente di usare una serie di proprietà che sostituiscono i "trucchi" che si usavano fino a qualche tempo fa.
La specifica è stata introdotta per rendere più semplice ed immediata la gestione di elementi, prettamente box, all’interno di un elemento contenitore, per risolvere problemi quali la centratura, la disposizione sull’asse orizzontale o verticale, la gestione dello spazio disponibile, il dimensionamento relativo dei box contenuti in un contenitore flessibile, l’indipendenza della posizione degli elementi presenti sulla pagina rispetto al codice sorgente.
Proseguiamo con il codice CSS per gli elementi interni.
.flex-item {
background-color:cornflowerblue;
width: 200px;
height:200px;
line-height:200px;
text-align:center;
color: #fff;
font-size:30px;
}
Il risultato, come anticipato, è esattamente uguale al primo. Abbiamo a disposizione due metodi per raggiungere lo stesso obbiettivo.
