Friday, November 23, 2007

Making A 3 Column Stretch Template

Ever since I followed the pack, and experimented with making myself a 3 column template (and discovered how deceptively easy that was), I've been considering making a 3 column stretch template. I have enjoyed my 2 column stretch template so much, that I sort of suspected that a 3 column stretch template wouldn't be a great stretch (pun intended) of effort.

And, I was right.

From what I can tell, 75% of the effort in making any template is in the setting up the widths of the containers. Remember the container layouts.

A 2 column template has 2 columns, floating opposite each other.
  • Main, floating left.
  • Sidebar, floating right.

All that you have to do is split the Main column.
  • Main1, floating left.
    • Sidebar2, floating left.
    • Main2, floating right.
  • Sidebar1, floating right.


That part is relatively easy. The challenge comes in keeping the columns from cramming themselves right next to each other. With a standard template, and each container having a fixed width, this is a real struggle. You have to calculate the width of each column, in pixels. Then, you have to add paddings, and margins, and carefully calculate the result. With a 3 column template, this is a bit more complicated, as the Main container is split into Main2 and Sidebar2, each container needing its own paddings (and the paddings of one set of containers becoming the margins of the parent container - or is it vice versa), which means that Main1 (pka Main) must be resized accordingly.

With a stretch template, the width of each container is allocated in % of parent container width. Containers Main1 and Sidebar1 float left and right, respectively. Sidebar2 and Main2 (within Main1) float similarly. The width of each container is in %. All that you have to do is establish "Main1 + Sidebar1" < 100%, with the difference from 100% becoming the margin between the two containers. Similarly, "Sidebar2 + Main2" < 100%, with the difference from 100% becoming the margin between those two containers.

Having laid out the containers, with their widths, the rest wasn't terribly complicated. I sort of reused the code from my previous effort, my 3 column Minima template.

For a challenge, I started with a standard (newly setup) Sand Dollar template. Sand Dollar is similar to Minima, in that the Main (posts / sidebar) area of the template contains very few decorations, making all screen width usable for content. The big difference between Minima and Sand Dollar is that Minima comes in two versions - fixed width and stretch, while Sand Dollar comes in just 1 version - stretch.

I examined the layout of a standard Sand Dollar template.
  • Main, floating left, width 66%.
  • Sidebar, floating right, width 31%.
  • Leaving a 3% margin between the two containers.


I split the Main container (now named Main1).
  • Main1, floating left, width 77%.
    • Sidebar2, floating left, width 25%.
    • Main2, floating right, width 72%.
    • Leaving a 3% margin between the two containers.
  • Sidebar1, floating right, width 20%.
  • Leaving a 3% margin between the two containers.


You can change any of these, as you like. You can make the main column narrower or wider, or make either sidebar narrower or wider, within limits. Just remember, if you go over 100%, you may end up with a dropped main or sidebar. And note that, if you're willing to have both sidebar columns on the same side and next to each other, this process becomes a bit simpler.

Enough design, let's look at the actual coding.

First, backup the template that you have right now.

Next, go to the Edit Template wizard. Find two snippets of code.

The first, in the Header, at the top ...

@media all {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 31%;
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 */
}
}


And a second, in the Body, nearer to the bottom ...

<div id='main'>
<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'>
<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>


And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the widget code from your current template to your new template!

The first ...

@media all {
#main1-wrapper {
width: 77%;
float: left;
padding:20px 0 10px 1em;
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 */
}

#sidebar2-wrapper {
width: 25%;
float: left;
padding:0px;
border-left:dotted 1px $bordercolor;
text-align:left;
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 */
}

#main2-wrapper {
width: 72%;
float: right;
text-align:left;
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 */
}

#sidebar1-wrapper {
width: 20%;
float: right;
margin:20px 1em 10px 0;
padding:0px;
border-right:dotted 1px $bordercolor;
text-align:left;
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 */
}
}


And the second (which now becomes the same code as for my 3 column fixed width template)...

<div id='main1-wrapper'>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

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


Save your changes.

Test.

And finally, backup the template, again!

And please feel free to examine the test result.

>> Top

19 comments:

Gossip Fashion said...

Hi,
I wanted to try out the three column stretch in my website but the first code which should be there, I couldn't find it!
Please please help!
My website: www.runwayglam.co.nr

Thanks

Chuck said...

You have 2 web sites, and the first contains the second in a frame.
1) The non-BlogSpot domain.
2) The BlogSpot blog.
Look in the BlogSpot code - it's all there.

Tammy said...

I don't know if you keep up with this site anymore but I have a question. I now have a 3 column minima stretch, which I like! BUT, my header image doesn't seem to "shrink" like it should when the window is minimized. Can you help?

Chuck said...

Tammy,

I'm not aware of any techniques for "shrinking" the header image. The best that I am aware of is header images that are truncated, when the width of the header container is reduced.

Care to post in GBH: How Do I?, with some links or details? Forums are much better for this discussion.

Tammy said...

Chuck, thanks so much. I have only one last question before I drive myself mad. I cannot get my header image to expand to the size of my header, no matter how I manipulate the size and pixels in Photoshop. In the "shrink to fit" info, it says Blogger will shrink it to 718 px, but I don't see anywhere in my HTML code where to make this larger. Can you assist in this at all? Thank you.

DirtDigger (Tessa) said...
This comment has been removed by the author.
DirtDigger (Tessa) said...

Chuck,

Thanks for posting directions on this- I did attempt to try this and it worked beautifully! I did run into one problem- and I don't know if it has to do with this or not. I looked at my blog (which is set to private right now) on my friend's computer and the side columns are merged into one- the wider one is where I put it (left side), then there is a space, and the two sidebars are merged into one long one- my friend's computer has a very large screen using IE. Hope you can help!

Tessa

Chuck said...

Tessa,

I'll offer 2 possibilities.
1) Check the relative widths of everything, very carefully. Look for a sum of container widths > 100%.
2) One problem with 3 column templates is that each existing column has to become a bit narrower. Look for template objects (pictures maybe) that are too wide for the space provided.

tommy salami said...

Wow, thanks for the tutorial. Works great- I'm having a small problem on the elements page, though- I can only put 1 element in the first sidebar. I can't recall where the variable is that lets you add more. Do you know it? My "test blog" is at:
http://moviesbeerandhotdogs.blogspot.com/
my real blog is at
http://www.pluckyoutoo.com/

Chuck said...

Hey Tommy,

You want to read Can't Add A Page Element?.

Minhaaj said...

apparently theres a limit of 718 pixles in blogger head. I want to use a banner of 1000 width. i wonder how is that going to work?

Chuck said...

Minhaaj,

I think that the 718 (??) px limit is for pictures uploaded into the standard header. Why not make a custom header of an HTML gadget?

esther lee said...

Thanks for this. I checked multiple sites detailing the process but yours was the most instructional which made it easier for me to figure out with my limited knowledge of HTML.

Admin said...

Thanks dude!! You rock! I've been looking all over for a 3 column template code that actually works. LOL I did have to tweak it a bit, but it's working lovely for me!

Meg said...

Wow!! This worked great for me--thanks so much!! I can't seem to get my gadgets (or anything else) to go on the new left sidebar though...any advice?

Chuck said...

Meg,

Check the settings for the new sidebar. "maxwidgets", "preferred", "showaddelement".

Meg said...

Once again, thank you so much!! I switched 'showaddelement=no' to 'showaddelement=yes' under the sidebar2 section and it worked like a charm! I'm new to html so it's really fun learning and actually getting it right :)

The Sears Family said...

I am sooooo confused...LOL....I need to find someone to help me...
It reads:
More than one widget was found with id: BlogArchive1. Widget IDs should be unique.
when I add the second part in?

Chuck said...

Sears,

Here's where I, once again, suggest that you post a question in Blogger Help Forum: How Do I?, or in Nitecruzr Dot Net - Blogging, and get peer support.