Artícle original: Rejilla con lista y problema con Explorer per en Choan

Es vol aconseguir que donada una llista de caixes quedin encolumnades les imparells per una banda i les parells per l'altre però que les parelles imparell-parell comencin sempre a la mateixa alçada.

Donat un XHTML:

<ul>
	<li class="imparell">Lorem...</li>
	<li>Phasellus...</li>
	<li class="imparell">Aenean...</li>
	<li>Sed et...</li>
</ul>

Aplicant un CSS

ul {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 400px;
}
li {
   background: lightgreen;
   width: 50%;
   float: right;
}
li.imparell {
   background: lightblue;
   float: left;
   clear: both;
}

Aquesta solució funciona per navegadors tipus Firefox, Opera i Safari però no pas per Internet Explorer.

Per fer reaccionar Internet Explorer de la manera esperada caldrà modificar les regles de la següent manera:

ul {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 400px;
}
li {
   background: lightgreen;
   width: 50%;
   float: right;
   _float: none;
}
li.imparell {
   background: lightblue;
   float: left;
   clear: both;
   _margin: 0 -3px 0 0
}

S'utilitza el mètode del guió baix per il·lustrar les propietats per Internet Explorer només per comoditat, no perquè es consideri millor.

Recursos relacionats

• Finer details of floats