Foros del Web - 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.