Creación de un diseño mixto de píxeles/porcentaje con divs

Question

Estoy tratando de hacer un diseño de página como se puede ver en la imagen adjunta. El problema es que no puedo hacer que funcione correctamente. Pasé medio día tratando de hacerlo funcionar, pero sin éxito. Solo quiero un div de ancho fijo para el menú y al lado de esos dos divs que crean columnas que cada uno ocupa la mitad del ancho de la página restante. Todas las alturas necesitan ser dependientes del contenido.

¿Alguien una idea? Pude encontrar mucha información sobre tales diseños mixtos de perecentage/pixel, pero no me puedo imaginar que sea tan difícil.

foto:

Answer 1

Algo así:

<style type="text/css"> 
.container 
{ 
    padding-left: 160px; 
    position: relative; 
} 
.leftmenu 
{ 
    width: 160px; 
    height: 200px; 
    background: red; /* For demo purposes */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.width50 
{ 
    width: 50%; 
    float: left; 
} 
.left-content 
{ 
    height: 300px; 
    background: green /* For demo purposes */ 
} 
.right-content 
{ 
    height: 150px; 
    background: blue /* For demo purposes */ 
} 
.clear 
{ 
    clear: both; 
} 
</style> 
<div class="container"> 
    <div class="leftmenu"></div> 
    <div class="content"> 
    <div class="width50 left-content"></div> 
    <div class="width50 right-content"></div> 
    <div class="clear"></div> 
    </div> 
</div> 

Eso es sólo el contenedor interior (sin cabecera o pie de página)

Answer 2

Un enfoque Javascript.

Aquí he creado el diseño exactamente que necesita. Check this link.

Cambie el tamaño del navegador y actualícelo. ¡Puedes ver que funciona!

Utilicé la siguiente secuencia de comandos para encontrar la resolución de la pantalla y luego calcular el ancho del contenido.

<script type="text/javascript"> 
wscreen = window.innerWidth; //Determine screen resolution 
content_width = (wscreen - 160); //Adjusting the screen 
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS 
</script> 

El enfoque de Pure CSS también funciona.

¡Salud!