Simple problem with two div containers?

My design involves two div containers (menu and contents) next to each other, so that menu is fixed width, and contents expand horizontally to fill all remaining space in the browser's window. I've typed up the following CSS code: #menu { float:left; width:120px; } #contents { float:left; } And... show more My design involves two div containers (menu and contents) next to each other, so that menu is fixed width, and contents expand horizontally to fill all remaining space in the browser's window.

I've typed up the following CSS code:
#menu { float:left; width:120px; }
#contents { float:left; }

And HTML:
<div id="menu">...</div>
<div id="contents">...</div>

The containers are next to each other, but 'contents' is only the size of the text inside it (visible with some background). By applying width:100% it moves below the menu which obviously I do not want.

Any ideas please?

I do not wish to use any JavaScript.
3 answers 3