Quando abbiamo un contenitore di dimensioni inferiori alla larghezza della pagina è molto difficile fare in modo che alcuni elementi al suo interno si estendano invece fino a coprire l'intera larghezza della pagina. Fortunatamente su SitePoint hanno trovato una soluzione che merita davvero di essere spiegata in dettaglio. Vediamola insieme.
Il problema maggiore sta nel fatto che noi non conosciamo in anticipo le dimensioni della finestra del browser dell'utente. Potrebbe essere di 1000, 1200, 1450, 1600 o 1900 pixel. O anche meno. Quindi per fare in modo che un elemento si estenda per intero in larghezza dobbiamo aumentare le sue dimensioni intrinseche. Intrinseco significa giocare sul box model e non sulla proprietà width, quindi useremo il padding destro o sinistro e il margine destro o sinistro combinandoli insieme.
Ma quale sarà il valore da dare? Visto che la massima risoluzione oggi possibile è di poco più di 2000 pixel, giocheremo d'astuzia ed useremo un valore di molto superiore, ossia 3000 pixel. Però c'è un problema: se usiamo un tale valore, comparirà la barra di scorrimento sulla finestra del browser. Quindi:
body {
overflow-x: hidden;
}
Con questo abbiamo eliminato la barra orizzontale. Possiamo quindi scrivere:
.extendfull, .extendleft
{
margin-left: -3000px;
padding-left: 3000px;
}
.extendfull, .extendright
{
margin-right: -3000px;
padding-right: 3000px;
}
Come funziona? Il padding spinge il contenuto dell'elemento nella dimensione specificata e il margine negativo compensa tale spostamento. Purtroppo Internet Explorer 7 e 6 necessitano del seguente codice aggiuntivo da dare tramite commenti condizionali:
<head>
<!--[if lt IE 8]>
<style type="text/css">
.extendfull, .extendleft, .extendright {
position: relative;
display: inline;
float: left;
width: 100%;
}
</style>
<![endif]-->
</head>
Potete visionare l'esempio finale in questa pagina.