Molti di noi, alle prese con i primi progetti di Web Design, si sono trovati ad affrontare l’annoso problema dell’allineamento degli oggetti dell’interfaccia.

Uno dei problemi più frequenti è quello di allineare un elemento, che può essere un titolo o una immagine, all’interno di un DIV.
Non vorrete mica ANCORA utilizzare le tabelle per le interfacce? VERO???

La cosa è più semplice di quello che sembra:

<div class="container">

<div class="obj">ciao</div>

</div>

Diamo una struttura al container:

.container{

width: 300px;
height: 300px;
position: relative;
border: 1px solid red;

}

Come vedete, è fondamentale settare come position:relative il container: in questa maniera comunichiamo che LUI è il riferimento dimensionale rispetto ad eventuali elementi absolute al suo interno.

Ora definiamo la regola CSS per il contenuto:

.obj{
width: 50px;
height: 50px;
background: blue;
position: absolute;
}

Come vedete, se definiamo come absolute il suo contenuto, possiamo farlo “fluttuare” all’interno del suo contenitore:relative. Comodo no?

Cosa manca?
Manca che non abbiamo indicato su quale bordo dovrà “appoggiarsi” il DIV.obj.
Aggiungiamo un bel bottom:0; right;10px;

.obj{
width: 50px;
height: 50px;
background: blue;
position: absolute;

bottom: 0;
right: 10px;

}

Fatto.
Un bel contenitore ed un oggetto allineato in basso a destra.
Ora potete tranquillamente inserire, all’interno del div.obj, testi e foto: rimarranno fantasticamente allineati come volete voi!