Minima Stretch To Three Column Template Layout

This quick guide will show you how to easily convert Minima Stretch to a three column layout template.

First, make sure your template is Minima Stretch:



Then navigate to Template->Edit HTML and get hacking:



Make room for the additional column by reducing size of #main-wrapper by the size of our new column (67% - 25% = 42%). Also, to get all our floats in a row, change the float and margin spacer from right to left:

#main-wrapper {
margin-left: 2%;
width: 42%;
float: left;
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 */
}

Create a new #sidebarLeft-wrapper by copy-and-pasting and then editing #sidebar-wrapper:

#sidebar-wrapper {
margin-right: 2%;
width: 25%;
float: right;
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-left: 2%;
width: 25%;
float: left;
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 sidebar left div to activate our third column place the section code in bold just before the main-wrapper:

<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 edits and then navigate to Template->Page Elements where you will now be able to add page elements to your newly created right column:



You can view a demo of this three column template at http://ms3c.compender.com/