hola, yo recien empieo tambien un poco en esto de CSS y estuve tratando de hacer algo como tu querias y he hecho algo asi
css
Código:
body {
text-align: center;
}
#contenedor {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 1px solid #ff0000;
}
#caja-si {
float: left;
width: 47%;
height: 45%;
margin-top: 2%;
margin-left: 2%;
border: 1px solid #ff0000;
}
#caja-sd {
float: right;
width: 47%;
height: 45%;
margin-top: 2%;
margin-right: 2%;
border: 1px solid #ff0000;
}
#caja-ii {
top: 50%;
float:left;
width: 47%;
height: 45%;
margin-top: 1%;
margin-left: 2%;
border: 1px solid #ff0000;
}
#caja-id {
top: 50%;
float:right;
width: 47%;
height: 45%;
margin-top: 1%;
margin-right: 2%;
border: 1px solid #ff0000;
}
y el html
Código:
<BODY>
<div id="contenedor">
<div id="caja-si">
esta es la caja superior izquierda
</div>
<div id="caja-sd">
esta es la caja superior derecha
</div>
<div id="caja-ii">
esta es la caja inferior izquierda
</div>
<div id="caja-id">
esta es la caja inferior derecha
</div>
</div>
</BODY>
lo veo en FF, Opera, y netscape y se ve maravilloso, pero en IE se ve horrible, y no se bien como arreglarlo, es increible lo que se puede aprender en foros como este y sitios como Diseñorama, tierra de nomadas, ignside.net, etc