Foros del web, para los que viven de bits

pellagofio · 09-sep-2005, 11:42

Tengo un problema con el posicionamiento CSS que me funcione igual para IE como para FireFox, Opera o NetScape ¡¡casi ná!!

supongamos que tengo este código html:

Código HTML:

<body>
<div class="pagina">pagina

  <div class='contenido1'>contenido1
  </div>

  <div class='contenido2'>contenido2
  </div>

</div>
</body>

y tengo el siguiente código CSS:

Código HTML:

.pagina{	border: thin solid green; width: 770px; top: 0px;}

.contenido1{ border: 1px solid blue;  width:40%; float: left;}

.contenido2{ border: 1px solid red; width: 40%; float : right;}

pues bien, en IE los DIV´s .contenido1 y .contenido2 quedan dentro del DIV .pagina, o sea, vemos un cuadrado verde y dentro un cuadrado azul y otro rojo. Pero en otros navegadores NO. En otros navegadores vemos un cuadrado verde Y POR FUERA EN LA PARTE INFERIOR uno azul y otro rojo.

Si quitamos los float: de los DIV´s .contenido1 y .contenido2 SI quedan dentro del cuadrado verde los otros dos pero ya no están alineados.

Gracias y saludos.

RoQ · 09-sep-2005, 11:53

El div padre no se adapta al tamaño de sus hijos, y estos se encuentran flotando, tienes que poner otro hijo mas debajo de los que flotan con la propiedad "clear" y de esta manera lo obligaras a estirarse, puedes poner algo como un <br style="clear:both" />

09-sep-2005, 11:42	#1 (permalink)
pellagofio Fecha de Ingreso: noviembre-2003 Mensajes: 382	posicionamiento actual diferente en IE y FireFox Tengo un problema con el posicionamiento CSS que me funcione igual para IE como para FireFox, Opera o NetScape ¡¡casi ná!! supongamos que tengo este código html: Código HTML: <body> <div class="pagina">pagina <div class='contenido1'>contenido1 </div> <div class='contenido2'>contenido2 </div> </div> </body> y tengo el siguiente código CSS: Código HTML: .pagina{ border: thin solid green; width: 770px; top: 0px;} .contenido1{ border: 1px solid blue; width:40%; float: left;} .contenido2{ border: 1px solid red; width: 40%; float : right;} pues bien, en IE los DIV´s .contenido1 y .contenido2 quedan dentro del DIV .pagina, o sea, vemos un cuadrado verde y dentro un cuadrado azul y otro rojo. Pero en otros navegadores NO. En otros navegadores vemos un cuadrado verde Y POR FUERA EN LA PARTE INFERIOR uno azul y otro rojo. Si quitamos los float: de los DIV´s .contenido1 y .contenido2 SI quedan dentro del cuadrado verde los otros dos pero ya no están alineados. Gracias y saludos.

09-sep-2005, 11:53	#2 (permalink)
RoQ Fecha de Ingreso: abril-2005 Mensajes: 763	El div padre no se adapta al tamaño de sus hijos, y estos se encuentran flotando, tienes que poner otro hijo mas debajo de los que flotan con la propiedad "clear" y de esta manera lo obligaras a estirarse, puedes poner algo como un <br style="clear:both" /> __________________ Blog de Juegos, Ayuda para CSS, XHTML semantico

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado