Hola buenas, tengo un problema con este código que me está volviendo ya un poco loco, lo he repetido 4 veces,
Código PHP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prueba</title>
<style>
html,body{
height:100%;
margin:0px;
padding:0px;
}
#contenedor{
min-height:100%;
position:relative;
margin:0px auto;
}
* html #contenedor{
height:100%;
}
#cabecera{
height:141px;
width:100%;
position:absolute;
left:0px;
top:0px;
background-image: url(images/menusup.jpg);
background-repeat: repeat-x;
}
#pie{
height:90px;
width:100%;
position:absolute;
left:0px;
bottom:0px;
background-image: url(images/inferior.jpg);
background-repeat: repeat-x;
}
#contenido{
padding-top:150px;
padding-bottom:90px;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#izq {
width: 200px;
background-color:#FFFFCC;
float: left;
}
#der {
/*float: left;*/
width: 540px;
background-color:#CC9933;
height: 1% /* Holly hack for Peekaboo Bug */;
padding-bottom: 30px;
padding-left: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
float: left;
}
#menusup {
padding-top: 20px;
margin:0 auto;
width:750px;
}
#foot{
width:750px;
height:50px;
padding-top:10px;
padding-bottom:30px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"><div id="menusup">Aqui el menú</div></div>
<div id="contenido">
<div id="izq">
1contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenidoIzq<br>
</div>
<div id="der">
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido<br>
contenido contenido contenido5<br>
</div>
</div>
<div id="pie"><div id="foot">pie</div></div>
</div>
</body>
</html>
El diseño es el siguiente, la cabecera y el pie están al 100% de alto, y depende del contenido de la página estos div subiran o bajaran pero siempre la cabecera quedará en lo alto de la página el el pie en la parte baja.
Las capas foot, contenido y menusup deben estar centradas y con un tamaño de 750px.
No se la verdad donde estoy metiendo la pata, pero ya no se por donde seguir, alguien podría ayudarme?
Un saludo