gracias viejo, hice un ejecicio y me funciono bien pero tengo otro en el que no me funciona, uso mas divs y ya he hecho de todo y no me sale, voy a poner el codigo con los divs en absolute que es como me funciona.
la idea es que al colocar bastante texto o poquito el pie siempre este al final.
espero alguien me guie que debo cambiar. y a que capaz debo ponerle relativo
yo cambiaba la capa global la principal y el pie a relativas, pero entonces no sabia como acomodarlas despues, se colocaban donde ellas querian y se perdia toda la maquetacion que tengo.
Código HTML:
<body>
<div id="globlal">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="escudo"> reservado para el escudo</div>
<div id="logo"></div>
</div>
<div id="menu">
</div>
<div id="navegacion">
</div>
<div id="principal" ></div>
<div id="pie"> </div>
<div id="curva-superior"></div>
</div>
</body> y el css
Código HTML:
#globlal {
position:absolute;
width: 800px;
height:688px;
z-index:1;
left:50%;
margin-left:-400px;
}
#curva-superior {
background-image: url(../objetos/curva-superior.gif);
background-repeat: no-repeat ;
position:absolute;
width:800px;
height:12px;
z-index:1;
left: 1px;
overflow : hidden
}
#curva-inferior {
background-image: url(../objetos/curva-inferior.gif);
background-repeat: no-repeat;
position:absolute;
width:800px;
height:12px;
z-index:2;
left: 1px;
top: 658px;
overflow : hidden
}
#cabecera { border-right: black 1px solid ; border-left: black 1px solid ;
position:absolute;
width:798px;
height:85px;
z-index:3;
left: 1px;
top: 12px;
}
#logo {
background:url("../objetos/LJ1.jpg");
position:absolute;
width:645px;
height:85px;
z-index:1;
left: 0px;
top: 2px;
}
#escudo {
position:absolute;
width:155px;
height:85px;
z-index:2;
left: 645px;
top: -1px;
}
/* inicio barra de navegacion */
#navegacion {
background:url("../objetos/barra.gif");
border-right: black 1px solid;
border-left: black 1px solid ;
float:left;
position:absolute;
width:800px;
height:35px;
z-index:4;
left: 0px;
top: 97px;
}
#menu {
background:url("../objetos/menu.jpg");
background-position: bottom;
border-left: black 1px solid;
position:absolute;
width:165px;
height:491px;
z-index:5;
left: 0px;
top: 133px;
padding:10px 0px 0px 0px;
}
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
#principal {
background:url("../objetos/fondo.jpg");
position:absolute;
width:634px;
height:503px;
z-index:2;
left: 166px;
top: 133px;
border-right: black 1px solid;
}
#pie {
background:url("../objetos/barra.gif");
border-right: black 1px solid;
border-left: black 1px solid;
position:absolute;
width:800px;
height:36px;
z-index:7;
left: 0px;
top: 636px;
}