Aquí te va la respuesta
Pero antes que nada tienes que saber que como dice nuestro compañero es malo abusar del absolute por la simple razon que al redimencionar la pantalla se te va a mover todo si no lo hiciste correctamente ok
Primero el contenedor principal debes de ponerle margen automático, aqui evitar poner los margenes izq y derechos.
Segundo el contenido lo pones en float a la izquierda y ya no es necesario que pongas margenes solo el ancho, el alto tampoco es necesario a menos que necesites especificarlo o simple lo pones al 100%, el contenedor derecha lo pones el float derecha y listo ya tienes todo lo necesario
Ahora surgirá el problema que el contenedor principal no se agrandara entonces pones body, y html altura al 100% al igual que el contenedor, y si eso no funciona pues lo forzamos agregando el div clear al final del contenedor con la propiedad clear: both; y listo ya lo tienes.
Por otro lado si te surge la necesidad de que tu pie este pegado al fondo solo quita los padding y los margenes.
un saludo y sigue practicando que así se logra aprender
Código PHP:
Ver original<style>
#page {
height: 90%;
width: 60%;
top: 5%;
bottom: 5%;
margin: auto;
}
#cabecera {
/* [disabled]position: absolute; */
height: 25%;
width: 100%;
top: 0%;
left: 0%;
right: 0%;
}
#contenedor {
width: 100%;
top: 25%;
bottom: 10%;
margin: auto;
height: 100%;
}
#contenido {
height: 100%;
width: 80%;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
float: left;
}
#colgadoDerecha {
width: 20%;
float: right;
}
#footer {
background-color: #090;
}
.clear{
clear: both;}
</style>
</head>
<body>
<div id="page">
<div id="cabecera">
<p>head</p>
<p> </p>
</div>
<div id="contenedor">
<div id="contenido">
<p>Si meto mucho contenido aquí el div no se me agranda
</p>
<p> </p>
<p> </p>
</div>
<div id="colgadoDerecha">
<p>derecha</p>
<p> </p>
<p> </p>
</div>
<div class="clear"><!--Sirve para corregir el atributo al usar float en conclución te hace grande el div contenedor dependiendo del contenido--></div>
</div>
<div id="footer">Pie</div>
</div>
</body>