<div class="clear"> ¿Cómo darle altura cero en IE?

[Hound]

Hola amigos,
Hace bastante tiempo que tengo esta duda.
¿Cómo puedo hacer para que el <div class="clear">&nbsp;</div> tenga altura cero en Internet Explorer?
Como sabeis, esta capa se usa para que las dos columnas flotadas y que se encuentran dentro de un contenedor, sigan creciendo hacia abajo sin salirse del contenedor.
Por ejemplo:



<div id="contenedor>

<div id="columnaIzquierda">Texto de columna izquierda</div>

<div id="columnaDerecha">Texto de columna derecha</div>

<div class="clear">&nbsp;</div>

</div>

#contenedor { width: 200px; }
#columnaIzquierda { width: 100px; float: left; }
#columnaDerecha { width: 100px; float: left; }
.class { clear: both; height: 0; }

En los buenos navegadores sale cero pero con IE no.
He probado a poner margin=0 y padding=0 en todo pero nada, IE se resiste.

Gracias

[Mikmoro]

Yo diría que no necesita tener nada dentro para funcionar. Me parece que podrías eliminar el &nbsp; tranquilamente.

Mikel.

[Hound]

Hola Mikel, gracias por responder, pero ya había probado quitando &nbsp; pero tampoco funciona así.

[Mikmoro]

Bueno, según el código que has puesto, yo los veo idénticos en IE6 y FF. Con el espacio en blanco, el contendor sobresale por abajo una cantidad igual al tamaño de letra que tengas establecido; sin el espacio en blanco, el contenedor queda a ras de las dos columnas por abajo. Quitando el espacio dentro del div, el tamaño de ese div es cero (o debe ser).

Yo lo veo idéntico en los dos. Mi costumbre es colorear los fondos o bordes para ver las capas con claridad, y si pones fondos a estas lo ves como te digo, a no ser que en tu proyecto haya otros elementos que afecten a esto.

Mikel.

[Hound]

Hola Mikel,
Sí, tienes razón, también entra en juego una imagen de fondo que pensaba no tendría repercusión en el tema.
Aparte de eso he dado con la respuesta y que comparto con el resto de compañeros:

clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear {display: inline-block;}
/* Hides from IE-mac \*/* html .clear {height: 1%;}.clear {display: block;}/* End hide from IE-mac */

Aún no puedo poner links a páginas. La pagina en la que explica todo detalladamente es: positioneverything.net, o buscar en google por: How to clear floats without structural markup.

Saludos,Ramón

[SiR.CARAJ0DIDA]

no entiendo para que todo este lio, solo basta darle overflow:auto/scroll/hidden al contenedor para que contenga (valga la redundancia) a los floats.

[Hound]

Sir, buena idea, nunca se me había ocurrido así. Pero con tu método en Netscape desaparece mi imagen de fondo del contenedor, así como el texto.
De la forma que expliqué en mi post anterior, se ve bien en los navegadores IE6, FireFox, Netscape y Opera (me falta comprobarlo en IE7 y en Mac )

Saludos,
Ramón

P.D. En mi post anterior puse mal la página donde aparece el artículo. Es (tres w) position is everything (punto) net,