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
Comentat per BenKo el 20/06/04
Eixa és la tècnica que vaig usar per fer el layout de la web de GTetrinet (http://gtetrinet.sourceforge.net). És un mètode molt útil i senzill.
Comentat per are el 20/06/04
aquesta web que dius només té una columna no? o no sé veure la segona...
Comentat per BenKo el 20/06/04
SÃ, pero per la columna utilizta una imatge al fons. Si vols dos columnes, o tres, només s'ha de modificar la imatge i posar els floats...
De fet, al principi vaig dissenyar la web amb dues columnes però els programadors de gtetrinet només volien una. Vaig canviar la imatge i prou.
Comentat per are el 21/06/04
ah oky, ja m'extranyava ;)
Comentat per volldammer el 22/06/04
Per igualar les columnes jo empro la "tècnica del peu" ;-)
Tenint aquest XHTML amb un CSS com el que has comentat
<div id="pagina>
<div id="columna>
</div>
<div id="contingut>
</div>
</div>
Afageixo un div a l'à rea pà gina que faci de peu:
<div id="pagina>
<div id="columna>
</div>
<div id="contingut>
</div>
<div id="peu>
</div>
</div>
On
div#peu {
clear: both;
}
D'aquesta manera em crea una à rea inferior per al 'peu de pà gina' que m'iguala l'alçada de les columnes.
Comentat per are el 22/06/04
Si, aixà acabes grà ficament la pà gina però no perllongues la columna flotant que és el que comentava.
El
clear, si és una estructura de dues columnes no cal que siguibothnomés "netejant" la dreta o l'esquerra n'hi ha prou.Comentat per a-css » Igualant columnes (mètode Ingo Chao) el 01/09/04
[...] umnes (mètode Ingo Chao)
01/09/04 Els dos mètodes explicats anteriorment (mètode faux columns original d’en Dan Cederholm i mètode amb el display: table de 456 berea [...]