Question

I am trying to turn a mock-up into a page with css but I’m not sure if there are some tricks I am missing due to inexperience. The image below is what I want. I want the char menu to take up a fixed width but I want the editing menu to stretch as the browser window is re-sized.

I don’t seem to be able to use percentages for sizing the fluid part since it will either overflow under the chat box or make white space between it.

Any help will be greatly appreciated!

Answer 1

*{margin:0; padding:0;}
html,body{width:100%; height:100%;}
.image{background:lightblue; height:100%; margin-right:200px;}
.menu{width:200px; height:100%; background:salmon; position:absolute; top:0; right:0;}

Demo