Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de <div class="clear"> ¿Cómo darle altura cero en IE? en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 22/01/2007, 17:04
Avatar de Hound  
Fecha de Ingreso: enero-2007
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 10 años, 10 meses
Puntos: 0
<div class="clear"> ¿Cómo darle altura cero en IE?

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

Última edición por Hound; 22/01/2007 a las 17:09
  #2 (permalink)  
Antiguo 22/01/2007, 17:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: <div class="clear"> ¿Cómo darle altura cero en IE?

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

Mikel.
  #3 (permalink)  
Antiguo 22/01/2007, 17:35
Avatar de Hound  
Fecha de Ingreso: enero-2007
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: <div class="clear"> ¿Cómo darle altura cero en IE?

Hola Mikel, gracias por responder, pero ya había probado quitando &nbsp; pero tampoco funciona así.
  #4 (permalink)  
Antiguo 22/01/2007, 17:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: <div class="clear"> ¿Cómo darle altura cero en IE?

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.
  #5 (permalink)  
Antiguo 22/01/2007, 18:39
Avatar de Hound  
Fecha de Ingreso: enero-2007
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: <div class="clear"> ¿Cómo darle altura cero en IE?

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
  #6 (permalink)  
Antiguo 22/01/2007, 20:55
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
Re: <div class="clear"> ¿Cómo darle altura cero en IE?

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.
__________________
Internet Explorer SuckS
Download FireFox
  #7 (permalink)  
Antiguo 23/01/2007, 04:09
Avatar de Hound  
Fecha de Ingreso: enero-2007
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: <div class="clear"> ¿Cómo darle altura cero en IE?

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,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:25.