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!