About   All Tips   Tips by Category   Tips by Ability   Help!

Advanced: Three Column Layouts

*Update: This tip was written for blogs that have older templates (installed before June 2010). If you wish to try this tip on a newer template, please do so on a practice blog first. I have not tried this with a newer template, so I am unsure if it will work or not. :)

The following instructions will give your basic two column blog a third column. The following instructions will give you a three column layout that looks something like the one on Folksy Musins'. When I create a three column layout (like the one on my blog right now), I follow my tip below, then tweak the margins to customize the width of the columns and space in between columns.

**********************************************


I found a website that was walking me through a 3 column template and I kept getting to this one step that I couldn't complete! I need help!

As someone who is relatively new to working with HTML, I looked high and low for easy to follow instructions on how to convert my two column template into a three column one. Everything written on the web seemed way over my head. I ended up spending an entire evening looking at several different sites*, trying to make sense of it all. I finally figured it out by playing around with the directions on these sites and by sheer trial and error. I started out with a blank minima template (recommended) and worked from there.

Keep in mind that I do not have a degree in computer science, nor do I know a great deal about HTML code. I am simply sharing information with you that was helpful to me in redesigning my blog template. MAKE SURE THAT YOU SAVE A COPY OF YOUR CURRENT TEMPLATE BEFORE ATTEMPTING TO CHANGE ANY PART OF THE HTML CODE OF YOUR BLOG. BE ADVISED THAT IF YOU FOLLOW THESE INSTRUCTIONS, THAT MOST OF YOUR WIDGETS/PAGE ELEMENTS WILL BE LOST. YOU MUST BACKUP THESE PAGE ELEMENTS THE HARD WAY, BY COPYING AND PASTING THEM INTO NOTEPAD OR WORD. I would definitely back up anything that you would not be able to replace easily, should it be lost.

I HIGHLY recommend creating playing around on a practice blog before trying to change your template. A practice blog will enable you to experiment and make all sorts of changes without worrying about losing the stuff you already have. This is easy if you’re starting from scratch, which is what I did. To me, it’s safer to play around on a practice blog, get everything the way I want it for my real blog and copy and paste it into my real blog once it is all pretty and perfected.
-----------------------------------------------------------------
Here's how I altered my blank minima template to include three columns. This is certainly not the only way to do this. You can easily find other instructions by googling "create three column template blogger." This is simply my version of how to do it:

Click on ‘customize’. Click on the Layout tab. Click on EDIT HTML. Click on Download Full Template. Save the template. Of course, if you’re playing around on a practice blog, you can skip this step if you want to.

I have used different colors to help you see the code better. You will only see black letters when you look at your template.

Find the part below in the 'Edit Template' section. Keep in mind that if you have modified your blog by adding borders, etc., that it probably won't look exactly like this.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 {
width: 220px;
float: $endSide;
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 */
}


1. Change the width of your outer wrapper to 890px.

2. Under the main wrapper float line, add a left and right margin:
margin-left: 20px;
margin-right: 20px;

3. Copy the part in red and green and paste it directly below itself.

4. Rename your new “#sidebar-wrapper” to “#left-sidebar-wrapper”.

5. Change the left-sidebar wrapper's float to “left”.

After you make all of these changes, it should look like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
margin-left: 20px;
margin-right: 20px;

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 {
width: 220px;
float: $endSide;
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 */
}

#left-sidebar-wrapper {
width: 220px;
float: 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 */
}

----------------------------------------------------------------

Now you have to let your browser know that your new left sidebar is actually there. To do this, scroll down until you see:
<div id='main-wrapper'>
Copy this new code in red below:
<div id='left-sidebar-wrapper'>  <b:section class=
'sidebar' id='left-sidebar' preferred='yes'/> </div>

and paste it directly above
<div id='main-wrapper'>

After you do that, it should look like this:
<div id='left-sidebar-wrapper'>  <b:section class=
'sidebar' id='left-sidebar' preferred='yes'/> </div>
<div id='main-wrapper'>
-------------------------------------------------------------
PREVIEW your template. If you like what you see, save it. Be advised that there will be nothing in your left column until you actually go to Page Elements and put something there. Another reason why I HIGHLY recommend playing around on a practice blog. I would have a hard time trusting that the left column was there unless I actually saw something in it.

Hope this helps! Enjoy your new three column template!

Related Posts:
Adding Borders To Your Older Template
Practice Blogs
Blogger Help Videos

21 comments:

Liz (Loving Mom 2 Boys) said...

This is great - exactly how I did my 3-column...I have a question - how did you get the code to show up in your post? I actually just wrote a tip the other day, went to post it, but it tried using all the code I wrote as actual code (KWIM?)

C.C. and Double T said...

Cool. I have been wanting to try a 3-column, but need to find some time to play with it.

A different question - how did you do the drop-down archive thing on the left of your blog? My archive is getting WAAAAYYYYYYY too long! ;-)

Elaine said...

Isn't it fun???

amanda said...

that's how i did it too. i LOVE playing around with it. and i actually did mine as 900 instead of the 890. but it doesn't really matter.

Deb said...

You have totally and completely impressed me. I stand in awe of your computer savvy...it took me days to change the font color of my titles.

He And Me + 3 said...

Good idea to use the practice blog. I didn't know that there was one. Hmmm. Learn something new everyday. Thanks for the tips!

The Beaver Bunch said...

Thanks!

Tiffany said...

Hey there,
Gotta question about converting to a 3 column blog. Can you still use fun backgrounds from places like Cutest Blog On The Block or will I have to do my own background and cute stuff?
Tiff
The Boren Life

feel free to email me if it's easier! :)

Tiffany said...

Hey Jill!

Me again! Thanks for the offer, but I think I got it!! Yippee!!! :) I feel so stinkin' smart! HAHA!! :) Thanks for dishing out the info and helpin' out bloggin' peeps like me. :) Have a great week, girl.

Tiff
The Boren Life

Robyn said...

I got this figured out and then when I changed my background my left column went away. I don't know what happend. Help!
Thank you

Vicky said...

Jill,

Thank you so much for posting very easy to use and understand directions for a 3 column template. I've tried a couple of times and have been unsuccessful, but came across your blog and now my test blog is a working 3 column blog! I'm looking forward to working on my 'real' blog next.

Thanks again for your time and effort to share this information with us.

Steph said...

Thank you so much for your great tutorials! So much easier than many of the tutorials I've been trying to follow.

I have a couple questions I'm hoping you can help me with! I'm working on a 3 column design, and I can't seem to get my background and columns to line up quite right when I resize the. My background image seems to do something funky, jumping around so that nothing is lined up!

Would it be better to just use separate background images for the columns? I tried that, but I did not like the look of having the background paper showing in the spaces between columns.

Anyway, I think that's most of it! You can email me if that is easier!

Thank you so much!
:)
Steph
smalls6464@gmail.com

Courtney Kirkland said...

Hi! Love your tutorials! They are so simple. I was wondering if you could help me. I have seen a lot of blogs with 3-columns, but at the top they have one double-sidebar post before they side bars divide in two beneath it {check out butterflygirlmsblogdesign.blogspot.com for an example of what I'm talking about.) I'm wanting to add that to my blog and don't really knwo what I should be looking for. Can you help?

The World As I See It said...

Thank you so much for posting this!!!! I got it all Figured out on my practice one. I never thought of making a practice one to mess around with!

amieandmichael said...

hey. i have 3 collumns but my 2 side columns are both next to one another on the right side... i checked it over and everything and can figure it out... pinkandpurple_12@hotmail.com

The Library Nook said...

Great ideas... I can spend all day playing around on the computer! Am happy to go with the standard templates, but would love to add header tabs like you have done here on your blog...any suggestions?

Books And Beyond said...

TY so much, quick question will this "erase" the new "reply" option in the comments section under posts that all the google blog templates now have?

Jill @ Sneaky Momma said...

Books and Beyond: This tip was written for use with older templates. I have not tried it on a newer one. My advice would be to try this tip on a test blog so that you could see what effect it would have on your blog, risk free. :)

Books And Beyond said...

Hi Jill,
I did it on my blog last night & the new Reply option to post comments works :)
Thank you for your blog & invaluable advice.
My blog looks really cute now that I was able to add the 3rd column to the minima template.
Some designers of backgrounds make awesum backgrounds that work best w/minima, being able to add the 3rd column perfected it!
AND I can reply to ppls comments on my posts.
ABOUT TIME Blogger added that feature huh?
Your blog helped me make my blog that much better :) U rock!

Books And Beyond said...

Do you know how to add block quotes to posts & make ppls comments to your post show up in block quotes?
I have seen it on other blogger blogs & it looks awesum!

Jill @ Sneaky Momma said...

YAY! So glad it worked! Thank you for sharing about your success! :)
I have not experimented with blockquotes. Perhaps this tutorial will help: http://www.royaltutor.net/2011/01/how-to-customize-blockquote-in-blogger.html :)