Liquid Layout with fixed width left hand menu

Question

Possible Duplicate:
3 and 2 column full screen (width & height) layouts (CSS)

What is the simplest, CSS-only, Cross-browser way to achieve the following CSS Layout:

• A left hand menu DIV with a fixed Pixel width (e.g. 200px).
• next to that, a content DIV filling the whole remaining area.

I have done this before with things like absolute positioning and stuff, which never felt very clean. Now I have to convert an old table layout and think the time is right to do this properly :)

Answer 1

The simplest seems to be:

<style type="text/css" media="all">

#left_hand {width: 200px;
            float: left;
            }

#main_content {margin: 0 0 0 200px; /* adjust for a gutter between divs */ }

</style>

<div id="left_hand">
<!-- content -->
</div>

<div id="main_content">
<!-- main content -->
</div>