PatomaS, haciendo pruebas con tu código, al final he conseguido que los divs mantengan su posición al redimensionar la pantalla!
Entre las pruebas que hice, fue añadir otro div para colocar un menú (que es como lo haré en mi página).
Aunque el problema está resuelto, no sé exactamente cuál de los cambios que he aplicado hace que ahora funcione como yo quería. Lo que si que observo, es que si quito el div del menú, vuelve a aparecer el problema... Qué jaleo...
Bueno, pongo el código que me ha funcionado, marcando en rojo el código modificado o añadido:
Código:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
background-color: #ccc;
}
#content{
float:left;
padding: 40px 40px;
background-color: #fff;
color: #333;
border: 1px solid #f00;
width: 80%;
height: 80%;
min-width: 80%;
overflow:hidden;
position:absolute;
}
#menu{
float:left;
padding: 40px 5px;
background-color: #fff;
color: #333;
margin-right:1em;
height: 80%;
width: 100px;
background:#E8EEF0;
}
div.div1{
float:left;
border: 1px solid #0f0;
}
div.div2 {
float:left;
margin-left: 3em;
margin-top: 6em;
border: 1px solid #00f;
}
</style>
<title>Pruebilla</title>
</head>
<body>
<div id="menu">
<h2>MENU</h2>
<li>opcion 1</li>
<li>opcion 2</li>
<li>opcion 3</li>
</div>
<div id="content">
<div class="div1">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
contenido div1
</div>
<div class="div2">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
contenido div2
</div>
</div>
</body>
</html>
Muchas gracias!