HTML layout: adding sidebar column to existing site

Question

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

  
...
  


        
      

Answer 1

I made a little jsfiddle to help you getting started. Also you might want to check if your div contents aren't messing up the whole CSS. Hope this helps.

Edit : all colors and dimensions are dummy ones used for the example. It shoudk work with any dimension.

html :

  
...
  

      

      

      

  
  
...
  
...

css :

.clearFix {
    clear: both;
}

#sidebar {
    width: 50px;
    height: 30px;
    background-color: green;
    float: left;
}

#header {
    width: 250px;
    background-color: red;
    margin-left: 55px;
}

#testLeft {
    width: 50px;
    height: 50px;
    float: left;
    background-color: pink;
}

#testRight {
    width: 50px;
    height: 50px;
    margin-left: 55px;
    background-color: purple;
}

#content {
    width: 250px;
    height: 20px;
    background-color: blue;
    margin-left: 55px;
}

#footer {
    width: 250px;
    height: 20px;
    background-color: orange;
    margin-left: 55px;
}