Skip to main content

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.

Comments

Nyra 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
Nitecruzr 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?
Nitecruzr 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.
Tessa said…
This comment has been removed by the author.
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
Nitecruzr 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.
Thomas Pluck 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/
Nitecruzr said…
Hey Tommy,

You want to read Can't Add A Page Element?.
Unknown 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?
Nitecruzr 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 Diehl 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.
Tree 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?
Nitecruzr 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 :)
Dana Sears 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?
Nitecruzr 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.

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".