Fixed menu, (optional) fixed submenu and content area for control panel using CSS

Question

I want to reproduce the following image for a website:

The idea is to have a fixed area (sidebar) that will contain menus and submenus, and all other area, content, can move up and down without affecting this sidebar.

I need the sidebar width to be adjustable, so the content will adapt its width, because on some pages this probably won't be a submenu.

I play with floats, but I think that I do not draw a good liara.

How can i do this?

Answer 1

http://jsfiddle.net/HUhfU/5/

<div id="main" style="width:100%;border:1px solid red;">
    <div id="sidemenu" style="float:left;height:200px;width:150px;border:1px solid green;">
        menu<br />
        menu<br />
        menu<br />
        menu<br />
        menu<br />
        menu<br />
    </div>
    <div id="content" style="height:200px;overflow-y:scroll;">
        menu<br />
        menu<br />
        menu<br />
        menu<br />
        .....
        .....
        I just filled up the content to show the scroll working
        .....
        .....
        menu<br />
        menu<br />
    </div>
</div>