HTML layout: adding sidebar column to existing site

Question

I have a site with a body that looks like that:

  
...
  


        
      

Answer 1

I like to use an absolutely positioned sidebar, then set the padding on the wrapper to the width of that element. Then I either set the margin-padding on the other elements, or I add it to the padding on the wrapper.

http://jsfiddle.net/jAVQv/

.container { position:relative; padding:0 0 0 55px; }
#sidebar {
    position:absolute;
    top:0; bottom:0; left:0;
    width:50px;
    background:#000;
}

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
    margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
    margin:5px 0 0 0;
}