Footer posizionato dopo elementi con metodo assoluto

• Tweet

• Tweet

Ultimamente abbiamo già trattato un articolo simile, vi abbiamo suggerito come posizionare un footer in fondo ad una pagina web.
Grazie ad un javascript in questo articolo vedremo come posizionare un elemento dopo un contenuto in modalità assoluta, come un footer dopo due colonne in position absolute. Questa soluzione è stata sviluppata da Shaun Inman ed è conosciuta come Inman position clearing.

Html

Ho impostato l’html in questo modo: contenitore con classe “c clear_children”, fondamentale per il funzionamento dello script, e all’interno due colonne, che andrò a posizionare in modo assoluto con il css. Infine il footer, collocato al di fuori del contenitore (c clear_children).

</pre>
<div class="c clear_children">
<div class="children_one">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</div>
<div class="children_two">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</div>
</div>
<div class="footer">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa</div>
<pre>

Css

Diamo forma al codice html creato sopra:

.clear_children{
    width:900px;
    margin:0 auto;
    background:red;
    position:relative;
}

.children_one{
    background:#666;
    width:300px;
    position:absolute;
    top:0px;
    left:0px;
}

.children_two{
    background:#333;
    width:600px;
    position:absolute;
    top:0px;
    right:0px;
}

.footer{
    width:900px;
    background:#999;
    margin:0 auto;
}

.cc_tallest{
    position: relative;
}

Javascript

In sintesi questo script rileva la colonna con maggiore altezza (nel nostro caso il box di sinistra) e le attribuisce la classe “cc_tallest”. A questa classe, come puoi notare sopra, vi è attribuita la proprietà position relative, che permetterà così al contenitore (c clear_children) di avere un’altezza. In questo modo il footer andrà a posizionarsi subito sotto.

<script type="text/javascript" src="si-clear-children.js"></script>