Alineando correctamente 2 columnas y 2 filas

charlielb · #1 (**permalink**) 28/09/2006, 01:27

Hola, actualmente estoy creando un nuevo diseño, plantilla o layout(como quieran llamarle) y estoy en pleno aprendizaje del lenguaje CSS.

El código que he creado es el siguiente:

Código:

<html>
<head>
<meta content="text/html; charset=iso-8859-1" />
<title>Diseñando layout</title>
<style media="screen" type="text/css">

div#Portada{font-family: helvetica, arial, verdana, "trebuchet ms", sans-serif;font-size: 13px; line-height: 22px; color:#204063; text-align: -moz-center; background-color: #0066FF; padding: 5px 5px 5px 5px; width:620px;}
div#Portada div {line-height: 20px;color: #000000;background-color:#00CC99;width:100%;margin: 0 0 20px 0;}
div#Portada div .ColumnaIzq {float:left;width:49%;margin: 0;}
div#Portada div .ColumnaDer {float:right;width:49%;margin: 0;}
div#Portada div .clearepar:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
div#Portada div .clearepar {display: inline-block;}  
    /* Holly Hack Targets IE Win only \*/
    * html div#Portada div .clearepar {height: 1%;}
    div#Portada div .clearepar {display: block;}
    /* End Holly Hack */

div#Portada div #SubContenido05 {background-color: #FF6666;}

div#Portada div #SubContenido05 .ColumnaIzq{width:50%; margin-right: 4px;}
div#Portada div #SubContenido05 .ColumnaInferior{width:50%; margin:10px 0 0 0;}
div#Portada div #SubContenido05 .ColumnaDer{width:49%;}
div#Portada div #SubContenido05 .ColumnaDer[class] {margin-left: 315px;float: none;}

 </style>
</head>

<body>

<div id="Portada">

<div>
<!--ABRE ENVOLTORIO-->
<div id="SubContenido05" class="clearepar">

<!--SUBDIVISION IZQ-->
<div id="SubContenido05" class="ColumnaIzq">ContenidoIzquierdoC</div>
<div id="SubContenido05" class="ColumnaInferior ColumnaIzq ">ContenidoInferiorD</div>

<!--SUBDIVISION DER-->
<div id="SubContenido05" class="ColumnaDer">ContenidoIzquierdoE</div>
<div id="SubContenido05" class="ColumnaInferior ColumnaDer">ContenidoInferiorF</div>

</div>
<!--CIERRA ENVOLTORIO-->
</div>

<div>
<!--ABRE ENVOLTORIO-->
<div id="SubContenido01" class="clearepar">
<div id="SubContenido01" class="ColumnaIzq">ContenidoIzquierdoZ</div>
<div id="SubContenido01" class="ColumnaDer">ContenidoDerechoX</div>
</div>
<!--CIERRA ENVOLTORIO-->
</div>

</div>

</body>
</html>

El problema de mi diseño, es que el ContenidoIzquierdoE y ContenidoInferiorF aparecen bajo la alineación de ContenidoIzquierdoC, y mi intención es que ContenidoIzquierdoE y ContenidoInferiorF aparezcan con la misma alineación que ContenidoIzquierdoC y ContenidoInferiorD

Les agradecería que me sugirieran el código que debo modicar, agregar o eliminar para lograr el diseño que necesito.
Por supuesto, la idea es siempre mantener el "ENVOLTORIO" correctamente alrededor de las sub etiquetas div y que la página se vea de la misma forma tanto en Internet Explorer como en Firefox(especificamente en IE 6 y FF 1.5)

Sé que no es tan complejo lo que debo modificar, pero llevo bastantes horas intentado encontrar la solución y ya estoy agotado, y no me queda imaginación..

Gracias!