Denim Stretch Three Column Layout Template Conversion And Source

This tutorial will guide you through the steps necessary to convert the two column Blogger template Stretch Denim into a three column layout. At the end of the tutorial the complete source will be provided. The steps are few, but the tutorial is verbose in an effort to help newcomers to CSS and blogger code understand the steps and be able to apply them in their own template conversions.

Before we start, lets examine how our screen real estate is currently used by examining our template's CSS. If we look at #header and #content-wrapper, we find that our "outside border" (light blue areas surrounding header and light gray areas surrounding the content area) is created with 2% margins; if you want to increase the size of the outside border, just increase these margins:

#header {
  margin: 0 2%;
  [...]
}

#content-wrapper {
  margin: 0 2%;
  [...]
}

We also find that our posting area, #main-wrapper, uses 64% of the #content-wrapper with a left side margin of 1% for a total of 65%. The sidebar uses 29% with a right side margin of 1% for a total of 30%. With our border margins included, this leaves 5% (undeclared) as padding between the posting area and the sidebar:

#main-wrapper {
  margin-$startSide: 1%;
  width: 64%;
  [...]
}

#sidebar-wrapper {
  margin-$endSide: 1%;
  width: 29%;
  [...]
}

Now that we have an idea of how space is currently used, lets plan out how we will make use of it for our three column design. Because adding another sidebar equal in size to the existing sidebar would push our screen real estate usage over 100%, we will have to adjust the widths of all the divs. That means, mathematically our usage needs to be less than or equal to 100%. For stretch templates, I find that 20% is usually enough space for most side bar widgets. With two sidebars, that is 40% used up right away and with their 1% margins (left for the left sidebar and right for the right) we have used up a total 42% with the sidebars. That leaves 58% for the posting area. Divided up with margins for "padding", our #main-wrapper will have a width of 56% with a left margin defined at 1% and an undeclared right margin of 1%.

In code our changes will look like this (modifications are in blold):

#main-wrapper {
  margin-$startSide: 1%;
  width: 56%;
  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: 1%;
  width: 20%;
  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 */
}
#sidebarLeft-wrapper {
  margin-$startSide: 1%;
  width: 20%;
  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 simply need to add our new #sidebarLeft-wrapper div (by copy and pasting of the sidebar-wrapper section) to the HTML to activate it:

<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:section>
</div>

You can view a demo of this template at http://sd3c.compender.com. Download the source.