This is the fourth in a series of articles on 3 column templates. In the second article in this series, we looked at a generic two column template and converted that to a generic 3 column template with two sidebars on the right hand side. I use the word generic because these articles will not talk about any given Blogger template.
In this article, we'll see how we can create a generic 3 column template with sidebars on the left and the right hand side of the main post area.
Again we will start from the generic two column template. (For details, please read the second article). The steps are the same whether we create two right sidebars or left and right sidebars.
First step is to duplicate the existing sidebar CSS selector and create a new one. The code shown in red below is the duplicated selector.
{
width: 220px;
height: 250px;
border: 1px dotted;
background: #a0cffd;
float: right;
}
#sidebar-wrapper-two
{
width: 220px;
height: 250px;
border: 1px dotted;
background: blue;
float: left;
}
We modify the float property to left as we want this second sidebar to be placed on the left hand side.
Next step is to introduce a new div element to the body of the template as a placeholder for this new sidebar. We place this div before the div for the main post area, as a child of the content-wrapper. The additions to our template are shown below.
<div id='sidebar-wrapper-two'>
<p>Side Bar Two</p>
</div>
<div id='main-wrapper'>
<p>Main</p>
</div>
<div id='sidebar-wrapper'>
<p>Side Bar</p>
</div>
</div>
In the actual Blogger template, you have to copy the div and the <b:section> element as well.
That's the key difference in this layout with respect to the previous layout. When we want to have two sidebars to the right, we inserted the new placeholder after the existing sidebar. But when we want a left sidebar, we insert it before the main post area. And the relative positioning is achieved with the floating of those elements. We float the left sidebar and the main post area to the left and keep the existing right sidebar floated to the right as it was originally.
The other two steps of expanding the parent containers and adjusting the wire frame editor remains the same. For details of those two steps please have a look at the second and third articles in this series respectively.
Once we finish the four steps we have our finished 3 column skeleton with left and right sidebars as shown in the following figure.
The new sidebar we added to the left is shown in dark blue.
(Note: The complete HTML page for the above figure is available here. If you want to see the full code, right click on the above link and save the page to your disk. Then open it using an editor such as the Notepad.)
