posicionamiento actual diferente en IE y FireFox

pellagofio · #1 (**permalink**) 09/09/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 · #2 (**permalink**) 09/09/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" />