Fixed sidebar and fluid content area - html

Question

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 absolute positioned. But when the content area is large, the sidebar background is not keeping up with content area.
Can anyone help me to create a basic structure of this?
This is what I have used!
aside{
width: 215px;
background: #f9f9f9;
padding:5px 0;
padding:5px;
position: absolute;
top: 128px;
bottom:0;
left: 0
}
.main .content{
background:#fff;
padding:5px;
margin-left: 195px;
height:100%;
}

Answer 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:
On the parent element of both sidebar and content: position: relative
On the sidebar:
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 215px; /* or whatever your fixed width is */
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).

Answer 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/

Answer 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:5px 0;
padding:5px;
position: absolute;
top: 128px;
bottom:0;
left: 0
}
.main .content{
padding:5px;
margin-left: 195px;
}