Fixed Sidebar And Fluid Content Area

I was trying to create a page like this image. But I'm stuck with the sidebar. I tried to make it float left and right. But some tricky problems! Tried to make the sidebar absolut

Solution 1:

You can do it with absolute positioning on the sidebar, and a margin on the content: http://jsbin.com/ucihul/1/edit

The key properties are:

1. On the parent element of both sidebar and content: position: relative

2. On the sidebar:

   bottom: 0;
   left: 0;
   position: absolute;
   top: 0;
   width: 215px; /* or whatever your fixed width is */

3. On the content div: margin-left: 215px (or whatever your fixed width is)

You can also have inner divs inside both the sidebar and content for additional control (they are in my demo, but I didn't do anything with them).

Solution 2:

How about this:

HTML

  <div id="sidebar">Sidebar</div>
  <div id="content">Content</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

 ​#sidebar { float: left; width: 100px; background: red; }
 #content { margin-left: 100px; background: blue; }​

Fiddle: http://jsfiddle.net/j7dS5/1/

Solution 3:

The easiest way to do this is graphically. Make an image that's as wide as the ".main" area and 1px tall that is colored appropriately for how wide you set your divs to be.

.main{
    background:url(images/image.png) top center repeat-y;
}
aside{
    width: 215px;
    padding:5px0;
    padding:5px;
    position: absolute;
    top: 128px;
    bottom:0;
    left: 0     
}
.main.content{
    padding:5px;
    margin-left: 195px;
}