CSS - Posicionamiento. Float:left Tengo un problema con el posicionamiento de las capas en mi plantilla, que no termino de solucionar. Llevo días dándole vueltas a la razón por la que la capa 4 no hace float-left respecto a la 3.
He diseñado una plantilla de la siguiente manera:
#capa_01_contenedor contiene a todas las demás.
#capa_02_cabecera contiene el logo de cabecera. Width = 100% interior.
#capa_03_menu width 8.8em para contener el menú de navegación float:left
#capa_04_principal debe ocupar el 100% del espacio restante (100% -8.8em) y situarse a la derecha de la capa_03 del menú con un float:left
#capa_05_footer ocupa el 100% del ancho interior y se situa debajo de todas las demás.
PROBLEMAS
1. La capa_01_contenedor no ocupa el 100% de la altura, a pesar de que tiene asignado height:100%
2. La capa #capa_04_principal debería situarse a la derecha del menú y ocupar el 100% del espacio que queda entre la capa #capa_03_menu y el margen derecho de la capa #capa_01_contenedor pero no lo hace. Cuando introduzco contenidos dentro de capa_04, la capa se sitúa debajo del menú.
¿Alguna sugerencia?
Os pongo un enlace directo al ejemplo y el código, para visualizar mejor el problema.
http://www.carlessola.cat/capas.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITULO</title>
<link href="http://www.carlessola.cat/favicon.ico" rel="shortcut icon" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<style type="text/css">
body {
height: 100%!important;
width: 100%!important;
margin:0!important;
padding:0!important;
background-color: #4C4C4C !important;
background-image:url(../imatges/fons/general.gif);
background-repeat:repeat;
background-attachment: fixed;
border:none;
cursor:default;
/* ------------------------TEXT GENERAL -------------------- */
font-family: "Century Gothic";
font-size: 0.8em;
color:#CCCCCC;
font-style: normal;
font-weight: normal;
line-height: 1.3em;
letter-spacing:0.06em;
word-spacing:normal;
text-align:justify;
}
#capa_01_contenedor {
width: 1024px!important;
height: 100%;
min-height: 100%!important;
margin: 0.3125em auto 0.625em;
padding: 0.3125em;
background-color: #4C4C4C !important;
border: 1px solid #7F7F7F;
border-radius:0.3em;
display:table;
border: 1px solid #3F0; /* Style Provisional */
}
#capa_02_cabecera {
width: auto!important;
height:auto!important;
padding: 0 0.1875em;
margin-bottom:0.3125em;
background-image:url(../imatges/fons/gris_ralletes.gif);
border: 1px solid #7F7F7F;
border-radius:7px 7px 0px 0px;
border-bottom: 1px dotted #3f0!important;
border: 1px solid #3F0; /* Style Provisional */
}
#capa_03_menu { /* Menu principal */
width:8.8em!important;
height:450px!important;
padding:0;
margin:0;
margin-right:0.3em; /* esto es para separar un poquito la capa 3 de la 4*/
overflow:visible!important; /* overflow visible para no ocultar menus desplegables */
display:table-cell;
float:left;
z-index:9;
border: 1px solid #3F0; /* Style Provisional */
}
#capa_04_principal { /*54.25*/
width:100% -8.8em!important;
height:100%!important;
padding: 0.3em 0.5em;
margin:0;
background-color:#595959;
position:static;
display:table-cell;
float:left;
z-index:9;
border: 1px solid #3F0; /* Style Provisional */
}
#capa_05_footer {
width: auto !important;
height:100% !important;
float:none;
clear: both;
text-align:center;
border-top: 1px dotted #7F7F7F !important;
padding: 5px 3px 3px;
}
</style>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
</head>
<body>
<a name="inici" id="inici"></a>
<div id="capa_01_contenedor">
<div id="capa_02_cabecera">
<br />
CABECERA - TOP<br />
<br />
</div>
<div id="capa_03_menu">
<br />
MENU <br />
<br />
</div>
<div id="capa_04_principal">
PRINCIPAL CONTENIDOS<br />
<br />
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.<br />
</div>
<div id="capa_05_footer">PIE PAGINA - FOOTER
</div>
</div>
</body>
</html>
