Adding a sidebar to Blogger theme

Now that we have a template that shows posts properly, we need to setup the sidebar.
Also we are making a responsive design here we will be ensuring that page doesn't breaks on different browsers and devices.

In previous versions of the Blank template you must have noticed that we added a footer and sidebar module to our theme. And you would have probably noticed that you can add the widgets to this area. Now all we have to do is to take this module and show it to the right of our theme so that it appears like a sidebar.
Now if you look back to our code, the module was

 <b:section class='sidebar' id='sidebar' showaddelement='yes'>

I removed other parts since this is our concerns with. This part has the class 'sidebar' being used. So we are going to define this sidebar in the CSS section. 
To do so add this.
#sidebar {
    float: left;
    width: 30%;

}


Now our sidebar is ready. But this doesn't really do anything and our sidebar doesn't look anything like a sidebar. This is because we have not defined any container to our theme and even if it floats left, it takes the left reference from the body section which again is still undefined. Now we will define an outer section to enclose the main and the side bar. 

#container
{
padding: 20px;
width: 1020px;
margin: auto;;

}

Padding so that the content appears fine and margin: auto to align the content in the center of the screen.
Now we need to define our main as well.
#main {
    float: left;
    width: 70%;

}

Now if you have added content to your footer, you theme would break. To fix that we need to define our footer as well.
#footer
{
width: 100%;
float: left;

}

Now this float:left is important. I might revisit this to align the footer contents to the center. But it still works for now.