Hola a todos!
Este es mi primer post y tengo un problema con el uso de float en un archivito..
Es la pagina de bienvenida para ingresar al sitio.
Necesito que quede así:

y se ve así:

El css:
#principal {
height: 400px;
width: 400px;
margin-right: auto;
margin-left: auto;
}
#principal #1_index {
height: 200px;
width: 400px;
float: left;
}
#principal #2_index {
float: left;
height: 50px;
width: 200px;
}
#principal #3_index {
float: left;
height: 50px;
width: 200px;
}
#principal #4_index {
height: 150px;
width: 400px;
float: left;
}
En la vista de dreamweaver ("Diseño") se ve bien y al hacer preview en el explorador se desarma. Lo probé en Iexplorer y Firefox.
Parece facil pero no se que onda por qué no me funciona.
Ojala me ayuden.
Saludos!