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:

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