Igualant columnes (Faux Columns)
Publicat el 16/06/2004
Un dels primers problemes que apareixen quan es deixa de maquetar amb taules i s'aposta per una estructura basada en CSS és el no poder controlar l'alçada de les columnes.
La solució que dona Dan Cederholm amb el seu artícle Faux Columns
és pràctica i fàcil.
Es basa en simular la continuació de la columna flotant o amb posició absoluta (la que dona problemes si és la més curta) mitjançant una imatge de fons.
Donat un XHTML
<div id="contenidor">
<div id="menu">
contingut del menú
</div>
<div id="contingut">
contingut del contingut
</div>
</div>
i un CSS
div#menu {
float: left;
width: 150px;
background-color: #fc0;
}
div#contingut {
margin-left: 155px;
}
Conseguim una estructura de dues columnes amb l'inconvenient explicat. Per extendre el color del div menu caldria fer una imatge de 150 pixels d'amplada per 1 pixel d'alçada del mateix color. I cridar-lo des del CSS de la següent manera:
div#contenidor {
background-image: url(imatgefons.png);
background-repeat: repeat-y;
}
Com que el "contenidor" serà igual d'alt que el "contingut" l'efecte serà que el "menu" també arribarà al final.
Comentaris