Denim Three Column Layout Template Conversion And Source

This tutorial will guide you through the steps necessary to convert the two column Blogger template Denim into a three column layout. At the end of the tutorial the complete source will be provided.

To start, we need to examine how our screen real estate is currently used. To find out, we look at the #header and #content-wrapper sections of the CSS where we find both have a default width of 760 pixels. Now, for me, that 760 pixels is not enough space for two columns and a decent sized post area - especially since almost all computer screens today are viewed at resolutions of 1024x768 or greater. Meaning at the minimum you can expect users to have 1024 pixels of screen width.

So, lets bump up our content area to 800 pixels by modifying the #header and #content-wrapper widths:

#header {
  width: 800px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

#content-wrapper {
  width: 800px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}

Next, we need to decide how to divvy up those 800 pixels into margins, columns and a content area. I find it helps to think in percentages. If we leave the margins as is at 14 pixels (on #sidebar-wrapper and #main-wrapper), once we add our new column will end up with a margin usage of 56 pixels at 7% of our total content area. The explanation being that each sidebar div will have one margin defined at 14, and the posting area (#main-wrapper) will have a left-margin at 14 pixels but be defined with a width having 14 pixels subtracted for an "artificial" right-margin. That leaves us with 93% for our sidebars and posting area.

To divide up our 93%, we will go with a safe 20% each for our sidebars leaving 53% for our posting area. In pixels that is 160px for each sidebar and 424px for our posting area.

Let's check our math: (4 x 14px margins) + (2 x 160px sidebars) + 424 px posting area = 800px of total content. Hooray!

Lets codify those numbers:

#main-wrapper {
  margin-$startSide: 14px;
  width: 424px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
  margin-$endSide: 14px;
  width: 160px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

To create the CSS for our new sidebar, copy and paste #sidebar-wrapper and modify it to float to the left and have the correct margin:

#sidebarLeft-wrapper {
  margin-$startSide: 14px;
  width: 160px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally we need to add the HTML div to activate our new sidebar:

<div id='sidebarLeft-wrapper'>
  <b:section class='sidebar' id='sidebarLeft' preferred='yes'>
  </b:section>
</div>

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>
</div>

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
  </b:section>
</div>

Save your changes and if you navigate to your Template's Page Elements settings, you will see that you are now able to add to your new column:



You can view the demo of this three column layout at http://d3c.compender.com.

Download the complete source for the Denim three column template.