Creazione di un layout misto pixel/percentuale con le div

Question

Sto cercando di creare un layout di pagina come si può vedere nell'immagine allegata. Il problema è che non riesco a farlo funzionare correttamente. Ho passato mezza giornata a cercare di farlo funzionare, ma senza successo. Voglio solo un div di larghezza fissa per il menu e accanto a quelle due div che creano colonne che prendono ciascuna metà della larghezza della pagina rimanente. Le altezze devono essere tutte dipendenti dal contenuto.

Qualcuno un'idea? Sono riuscito a trovare molte informazioni su tali misti layout perimetrale/pixel, ma non riesco a immaginare che sia così difficile.

Immagine:

Answer 1

Qualcosa del genere:

<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> 

che è solo il contenitore interno (senza intestazione o piè di pagina)

Answer 2

Un approccio javascript.

Qui ho creato il layout esattamente di cui hai bisogno. Check this link.

Ridimensionare il browser e aggiornarlo. Puoi vedere che funziona!

Ho usato il seguente script per trovare la risoluzione dello schermo e quindi calcolare la larghezza del contenuto.

<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> 

Anche l'approccio CSS puro funzionerà.

Saluti !!!