Gran part de les tècniques de posicionament d'elements amb CSS es basen en la propietat float.

L'element complementari d'aquesta propietat és el clear, el qual permet netejar l'efecte de les caixes flotants anteriors.

La especificació de CSS diu sobre el clear:

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)

Fins fa poc creia que el clear afectava només els float anteriors germans però el que diu la especificació és an earlier floating box que dóna a entendre que afecta a tots els float declarats anteriorment.

Això vol dir que els motors gecko tenen un error d'implementació ja que només netegen l'efecte de les caixes flotants anteriors germanes.

El problema

Si es complis aquesta regla els mètodes que empren el float per fer columnes tindrien un greu problema ja que seria impossible utilitzar altres float i clear dins el contingut ja que el clear netejaria l'efecte flotant de les columnes.

Com solucionar el problema?

El primer a tenir en compte és la opinió de n'Eric Meyer amb el seu article Floats Don’t Suck If You Use Them Right float was never meant as a layout tool. Directament descarta la propietat float per fer composicions de pàgina.

Segons ell els float seveixen per:

They're simply meant to take an element, put it to one side, and let other content flow around it.

La opinió de n'Eric Meyer és molt vàlida i segur que és la idea que tenien quan van definir aquestes propietats però, a l'hora de maquetar amb CSS en un món on no tots els navegadors són prou bons cal contemplar-lo com a una opció important.

1. Posicions absolutes

Una primera solució seria utilitzar posicions absolutes per fer les columnes. Aquesta però té una "deficiència" que pot no agradar a molts; una caixa amb posició absoluta mai serà continguda per la seva caixa pare.

Això fa que si es vol emprar un mètode de l'estil faux columns hi hagi circumstàncies que s'han de tenir en compte.

Quan la caixa amb posició absoulta és més alta que l'altre sobresortirà per sota. Això es pot evitar fixant una mínima alçada per la caixa contenidora però això només funcionarà si el menú no varia d'alçada. Quan aquesta sigui variable (p. ex. perquè és un menú on les subopcions col·lapsen) aquest mètode no funcionarà a no ser que l'alçada mínima sigui la de la opció més llarga de menú (cosa que pot quedar francament malament).

2. float dins de float

Aquesta solució és efectiva però no sé fins quin punt és correcte, m'explico:

No he trobat enlloc com ha d'actuar un clear amb un float declarat anteriorment al seu pare si el seu pare és una caixa flotant.

Si el float del pare ha d'anul·lar l'efecte del clear la major part de navegadors ho fan correctament.

Fins que no es demostri el contrari treballaré amb aquesta hipòtesi (pur pragmatisme).

Això voldria dir que per crear composicions de dues o més columnes es podria utilitzar quelcom de l'estil:

<div id="contenidor">
   <div id="primerFill">...text...</div>
   <div id="segonFill">...text...</div>
</div>

Aplicant un CSS del tipus:

div#contenidor {
   width: 90em;
   margin: auto;
}
div#primerFill {
   float: left;
   width: 20%;
}
div#segonFill {
   float: left;
   width: 80%;
}

Així conseguiriem una composició de dues columnes més estable. Si al contingut d'un dels fills hi hagués una imatge flotant i posteriorment un clear no hi hauria cap desperfecte ni teòric ni pràctic.

La solució teòrica més sòlida: display: table

Com ja havia comentat fa temps el mètode de display: table és el més robust pels navegadors moderns. És només una solució teòrica degut a que Internet Explorer no sap interpretar aquestes propietats.

Potser sigui hora de començar a implementar aquesta solució per qui la sap tractar i fer una versió amb float dins de float pels navegadors antics.