He desestimat aquesta tècnica per falta de suport de l'Internet Explorer en Quirks Mode.

A l'entrada "Igualant columnes (mètode Ingo Chao)" vaig explicar breument la idea fonamental del mètode. Ara però, cal esbudellar el codi.

L'estructura HTML necessària

<div id="contenidor">
   <div id="contenidorEsquerra">
      <div id="contingutEsquerra">...text...</div>
   </div>
   <div id="contenidorDreta">
      <div id="contingutDreta">...text...</div>
   </div>
</div>

Posicionament de les caixes via CSS

L'exemple serà amb dues columnes iguals. Per fer-ne una de major que l'altre només cal vigilar a no sobrepassar l'amplada de la caixa contenidor amb la suma de les amplades de contenidorEsquerra i contenidorDreta

El div id="contenidor" només serveix per fixar una amplada total del conjunt.

div#contenidor {
   width: 34em; 
}

Farem les columnes un pel més estretes per tal de deixar un espai entre ambdues.

div#contenidorEsquerra {
   width: 16em;
}
div#contenidorDreta {
   width: 16em;
}

I les convertim en columnes utilitzant la propietat float

div#contenidorEsquerra {
   width: 16em;
   float: left;
}
div#contenidorDreta {
   width: 16em;
   float: right;
}

Ara cal posicionar les dues capes contingut a la seva banda oposada

Per fer-ho primer cal definir-les com a caixes relatives explicites (perquè no absolutes?), dona'ls-hi la mateixa amplada que la caixa pare contraria i desplaçar-la mitjançant les propietats de posició.

div#contingutEsquerra {
   position: relative;
   width: 16em;
   left: 18em;
   z-index: 1;
}
div#contingutDreta {
   position: relative;
   width: 16em;
   right: 18em;
   z-index: 2;
}

El valor de l'atribut de posició (left, right) serà la resultant de la equació (contenidor/2) + x on x serà la resultant de contenidor - contenidorEsquerra (o contenidorDreta)

A la pràctica; si la caixa pare és de 16em i la caixa contenidora és de 34em el valor de left serà de 17em + 1em = 18em.

La propietat z-index és indispensable perquè l'Opera mostri les dues caixes relatives sempre a sobre de les altres.

Finalment donant el mateix color de fons a les quatre capes implicades es veuran dues columnes de la mateixa alçada.

Perquè no poden ser caixes amb posició absoluta contingutEsquerre i contingutDreta?

Al fer una caixa absoluta la seva avantpassada relativa no s'expandirà per contenir-la, en canvi si és una caixa relativa la seva caixa pare si que s'expandirà encara que la filla estigui desplaçada amb les propietats top, right, bottom, left

Afegint les següents regles s'aconsegueix que l'Internet Explorer de Windows suporti el mètode. L'Internet Explorer de Mac no el suporta, però.

/* IE6 Win hack per en Thomas Berregren, ocult per l'IEMac \*/
* html .contenidorEsquerra {
    overflow: hidden;
}
* html .contenidorDreta {
    overflow: hidden;
}
/* FI ocult per l'IEMac*/