How do you make a fixed side menu with main content scaling to the edge of the screen?

How do you create a layout where you have a fixed-width side-menu but the main content 开发者_开发知识库scales to the rest of screen?

Here is a sample of the markup:

<ul id="sideMenu">
   <li>....</li>
</ul>
<div id="mainContent">
   ... everything else ...
</div>

Is this possible?

Also, it would be great if we could set a min-width on mainContent as well as this working all the browsers consistently ;)

Float the sideMenu and then set the margin of mainContent to match that. This keeps the mainContent from wrapping around the sideMenu.

#sideMenu{float:left;width:200px;}
#mainContent{margin-left:200px;}

it may be possible by placing ur content in a table with cellspacing and cellpadding set to 0. Set the width of the td also to 100%. All u have to do is trial and error method to see.