Search code examples
menufullscreensidebarcss

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 ;)

Solution

  • 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;}