How to make a 3 column template

In this tutorial we will be making a 3 column blogspot template based on a two column originally designed by Douglas Bowman you can see it here so i recommend you create a new blog for this tutorial using the following template

now we have our template lets go to the settings tab and change blog permissions and restrict it so only authors can see it as we dont want anyone viewing it while we are coding or do you ? well you choose

Now it's time to get our hand's dirty working with the code so go to the edit html tab as shown below they will be no need to backup your template if you have created a new blog like i said

first we need to expand the width of the outer-wrapper so we can fit our new column in so find the following CSS code

and change the width from 660px to 980px like i have done below

do the same for the header like i have below unless you want your blogs header to stay the same width which is 660px

now copy the following CSS code

#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;

and add it to your template like i have done below

now we will add the XHTML code for the new column so copy the following code

<!-- our new column -->
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div> <!-- new column added -->

and paste it like i have done below in between the content-wrapper and the main-wrapper

now we add a margin to the left of the main-wrapper like i have done below so it pushes the main post into about the center of the page also i have adjust the width of the main-wrapper from 410px to 460px

if you would like to center your blog description remove the max-width:700px; from the CSS code within the description class see screenshot below

now we need to add this final bit of code and we are done

/* tweaks for wireframe */
body#layout *{margin:0;padding:0;}
body#layout,body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:40%;}

save your template if you followed this tutorial right you should see this on your page elements tab

now you have a 3 column template see mine live HERE and dont forget to comment if it worked for you i hope you enjoyed this tutorial

The template is avaliable for download for those who got stuck on the tutorial this is only for reference if you intend to use it on your blog the template has only got the default 3 widgets installed which are followers, archive and the profile widgets in it so if you upload it to your blog with more than 3 widgets in they will be deleted Download Here

162 Responses to “How to make a 3 column template”

Great tips and guides. Keep up the good work. You must be a pro.

I am also using three (3) columns template for my blog at .

I made the first steps into making my blog a 3 column, I tried with this one.

I just need to clean up some images from the initial layout just trying to look at the codes.
Let me know!

This has reaally been helpful

Well done dude !
I was looking for such three collums thing!
I will work on it once i have enough time.
Thanks and keep up the good work

Hey there!
Already tried it... but I still have to do a little more on making mine look better. ^-^

Thanks again for this tip!
Keep it up! ^-^

This comment has been removed by the author.

Hey there!
Good job
jamiz, I want to have 3-columns blog, but now i have another free template with 2-columns. It's old - I modify some things.
What can I do now? Do you help me,

not all the Images exist in your post can you please post the images again.
I really want to make the 3 column template.

This comment has been removed by the author.

can you tell us how to make a 3 column template looks just like this site

I followed your tutorial, my page elements page looks the same as yours, where I now have three columns, but when I view my blog, I still only have two. Any advice? Thank you.

Your instructions were so easy to follow, and it worked great. I can't begin to thank you enough, as I've been searching for how to change to 3 columns for a while now, and none of them worked with Blogger. Excellent job on your part! I'm going to post about your site on my blog in case others are looking for help in this area.

can you please write a post about how to make 4 column template.
just like this site:

Well...I can't say I did it that way, but I did get it to work. I'll have to go back through and try to fix it the way you have it and maybe it will work better. Thanks!

Okay, I tried this and it looks just like your layout - the right column is down at the bottom of the page. Why is that so? It should be up at the top. I believe it has to do with the margin line.



June 01, 2008

awesome tutorial!


June 09, 2008

You're awesome. Very easy to follow. Thank you!


June 26, 2008

Thanks so much. Your post really helped me to create a 3 column that I've wanted for so long.

Awesome tutorial..10x to the author .

Great website too..Bookmarked it !!

Thank you, Thank you, Thank you!!! You don't even know how much you helped me. It was very understandable, and now my blog looks even better!

Thanks Alaiyo im glad i was able to help you

wow thanks a lot i guess its working with me...easy to be followed steps good job!

Hi I can was wondering where the final bit of code goes to?(now we need to add this final bit of code and we are done)

I cant find it on the page.

Thanks for this great tutorial btw.

@Bertrand Lim
the final bit of code you need is shown in the image and it goes right there where it is shown in the screenshot

Hi Thanks for reply.
I do not have the last bit of code.
So I have to type in from Page Structure all the way to section?
I made my 3 column through your instructions btw

Wanted to adjust the page so that it would fit the page completely. Currently its a little bit off.

@Bertrand Lim
I have just updated the tutorial to include the code you needed. I've looked at your template and it seem's that you have the header-wrapper set at 980px wide and the outer-wrapper set at 970px which is wrong because the header-wrapper is nested inside the outer-wrapper and it is wider so try changing the header-wrapper to the same as the outer-wrapper also try removing the padding on the outer-wrapper see if that works

Thanks Lawny, the blog looks great now. This is the best website for 3 column templates on the web. I went to many others and some didnt make sense or others just gave wrong codes. This is definately the Site for making 3 column templates. 5*Stars

@Bertrand Lim
Thanks for the kind comment i'm glad i was able to help you happy blogging

Have to tell you you rock!
This was so easy and turned out perfectly.

thanks for the kind comment you are welcome anytime

Here's another grateful "tutee". I am a newbie blogger with negligible xp in html edit and your tutorial is so clear that even I can do it right! Just a small point to check with you: under the original sidebar-wrapper code (probably obvious to someone experienced), the float is stated as "$endSide" under the original sidebar wrapper (before your changes) as follows:

#sidebar-wrapper {
width: 220px;
float: $endSide;

Am I correct to say that you have changed the float to "right" ? The float for the original sidebar was coded as "$endSide" in 2 instances.

Thanks again for a great, great job!

it really doesn't matter about that code because they get replaced when you view the source code generated by blogger

Very very nice !! And very easy with your leads.

Thanks a lot.
Can you tell me how to change the color of the new column?

I posted a comment earlyer today...
But what I really want to know is: how do I get the HTML so that I can change the content of the new sidebar so that it is different from the old one?

just add more rules to the sidebar-wrapper example

#sidebar-wrapper2 {
border:1px solid #000;

what about how to make the two sidebar in the right not one in the right & one in the left.

i already have here a 4 column or do you mean a 3 column with two sidebars on the right ?

yes,I mean a 3 column with two sidebars on the right

I tried what you said, but then I get this: blog/red.jpg .

Maybe I better can add a second sidebar-content? So I can also change other settings (like background for the title)...
But how to do this?

to change the background of the sidebar titles use code like this

.sidebar h2 {
background: #a89cbf;

that is already in your template also it works for both the sidebars if you followed this tutorial same for this code

color: #e6e6e6; /* color of sidebar text */


both those codes are in your template already

you could modify the 4 column layout just remove the left column code and it would become a 3 column with two sidebars on the right i may think about writing a tutorial on it but not yet

Lawny, thanks for your answer, but I think I wasn't clear enough.

I want the lay out of my two sidebars to be different from each other.
Changing the background color off the new sidebar as you said:

just add more rules to the sidebar-wrapper example

#sidebar-wrapper2 {
border:1px solid #000;

didn't work (as you can see in the picture @ the link I put above).

Maybe there's another way?

first off the code on your background is invalid it is set at


it should be




next if you want those two sidebars to have different background colors you need remove the code for the .sidebar because both sidebars are sharing that rule so change


.sidebar {
color: #e6e6e6;
line-height: 1.5em;


.sidebar {
line-height: 1.5em;

then create more rules for each sidebar like so

#sidebar-wrapper {
background:#606060; /* right sidebar styles */
color: #e6e6e6;
#sidebar-wrapper h2{
color: #e6e6e6; /* right sidebar heading styles */

#sidebar-wrapper2 {
background:#f00; /* left sidebar styles */
#sidebar-wrapper2 h2{
background:blue; /* left sidebar heading styles */

Thanks, your great, that's what I wanted to know.

Thanks a lot !!

your welcome anytime ;-)

This was amazing!! Thank you so much!!!!! I had tried to do this so many times with other instructions which I just could not get my head around. You made the difference, THANK YOU!!

@On a Whimsey
you are welcome thanks for the comments everyone

You're instruction is so easy to follow. Thanks!

@Gin E
thanks for the comment your welcome

Thank you SOOOOO much!! You are awesome!!!!

hi, nice tips..but it didn't really work in my blog template..:(
would u kindly upload ur full template here?
plz n 10q~

@dr trah
Yes of course since many people have requested it I've updated the post at the bottom you will find a link to download it and compare your results to mine thanks for the comments everyone ;-)

Thanks a lot friend. I visited several other websites and tried to create 3 column template, but was not able due to some errors. However, you have given all the information as clearly as possible which makes it so easy to create the 3 column template in minutes.

I was browsing your blog for more than 1 hour now...and it has a vast amount of information to help fellow bloggers....just became your fan mate!

Thanks Again



Thanks for the great help.

I have noticed that you have used "Minima Template" as an example. Is there any additional settings to change if we are using another Template in Blogger - For instance I'm using "Rounders Template" so can I make it 3 column with these modifications.

Let me know


your welcome I'm glad you like my tutorials

The rounders template would include a lot more steps because it uses images to create the rounded corners I may think about writing one for that but I'm not promising anything

so, it can be done! Thanks buddy for the nice tutorial. I'll try this on my I hope I could keep the backgrounds and fonts color/family/sizes though afterwards.

should this work if i already have a blog up? or does it only work with new blogs?

@lil songbird mama
yes it will work with any blog as long as you follow the instructions and you are using the new blogger layouts always download a backup copy of your template before editing anything as i cannot be held responsible if you mess up your layout

This is the best walkthrough!
I've linked you on my blog.

/veronica in sweden

Thanks for the link i'm glad you found the tutorial easy to follow
can u suggest me how to change my blog fro 2 to 3 column

The layout your using is completely different from the one shown in the tutorial so i can't really help you as it would include writing another tutorial or doing it for you which i don't have time to do unless you want to hire me sorry friend

This is such a great tutorial! It worked for me. Thank you! :)

I'm glad you like my tutorial thanks for the comment

I have wanted a 3 column blog using Blogger's Minima template for a while and have looked and looked for something like it. Lawny has several that are nice, but I like the simplicity of Minima. After finding this tutiorial, I decided to take a chance at altering the code on Minima and it worked! A piece of cake - and I don't know anything about code.

I did not think I could do this, but I did!
My only issue is that when I look at my page elements, my header comes out of the right side margin. It doesn't seem to cause problems, so I'm not going to try to figure it out.

Thank you for helping me through this!!

I have to say thanks for this tutorial! Apparently, I did something wrong because the script below my title isn't centered and and my margins aren't working with a 3 column downloaded background. I'm 55 (can I use that as an excuse?) and know NOTHING about HTML. Can you possibly help me make corrections? Can the Font be a darker color, so that it shows up better?

@Suzanne in TX
Hi which script below your title are you talking about ? which fonts do you need in a darker colour ? and what margins are you trying to adjust ?

Sorry to take so long to respond--I'm in the middle of a kitchen remodel--yikes. The script in the header box that starts out "Hello from Abilene, Tx..." . All of the should be centered under Suzanne's Perfect Treasures--I think. The font of that same script is appearing to be a light-medium gray on my monitor, as well as, "followers", "about me","Blog archive", etc. I would like them to be darker so that old people like me can read them.
The side margins are too wide for the "free 3 column template" that I downloaded--I really think the left margin is more narrow than the right. Should they be the same? Maybe I entered the numbers incorrectly somehow.
Thanks so much for your super fast response hours ago.

Hi to center the blog description you need to look for the following code

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;

remove the max-width:700px; so it becomes

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;

now if you want to change the description colour you can hard code the hex code in the code above where it says color:#999999; just change the six numbers to whatever colour you want you can find hex codes here and even more by doing a google search for hex codes if you want to change the colour for the sidebar titles use code like below

.sidebar h2{

the code above should change all the sidebar titles to the colour black again you can change that to whatever you want by changing the hex codes as for the margins you need to find the following code

#outer-wrapper {
width: 980px;
margin:0 auto;
font: normal normal 100% Georgia, Serif;

change the width from 980px to 960px then just below that code they will be some more code like

#main-wrapper {
margin:0 0 0 35px;
width: 460px;
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 */

change the left margin from 35px to 30px or adjust to whatever you want i hope this helps you


Hey Lawny--I finally had some quiet time where I could work with your instructions--thank you, thank you, thank you for such details to get me through the process. It still isn't perfect, but it is SO much better.
You're the BEST!

you should remove the width for the header-wrapper because it is wider than the outer-wrapper which is only 955px wide thanks for the comment

I followed the instructions exactly and I still have a 2 column blog. Also, when I tried to download your template, I got an error saying that xml page cannot be opened. Help!

Hi what problems are you having with the tutorial ? and what browser are you using to download the file ? try right clicking the link and choose "save target as" or "save link as" see if that works for you

great step by step instructions. thanx
i would also like to know......
1)how i can use a jpeg on my blog...not as a full background, but as a border on either side of my texted area.
2)same thing but FOR THE TEXTED AREA
3)how do i replace the heading with a design of my own
if you are unable to help me, can u point me in the right direction
any advice greatly appreciated....thanx in advance

what do you mean the texted area ?

main wrapper (i think - middle)
i hope thats right

I do not know what you are talking about

sorry about that i deleted your comment accidentally you should be able to add it back again by clicking "add a gadget" link and choosing the profile widget from the list of gadgets

i tried error keeps popping up...something about re-arrange...

Thanks for your is a blogger issue..I just added something else...I love my three columns now!..Your great!

Glad you like it thanks for the comment

Thanks for this easy-to-follow tutorial. I found it so easy to change my blog to 3 columns. I appreciate it!

Thank you so much!! I've added a third column to my blog, but I can't get the post column to be in the center. Both of my sidebars are on the right. I have one set to float to the right and the other set to float to the left. Please help if you can. As you can tell I don't really know what I am doing.
Thanks a ton!!

Hi glad you enjoyed my tutorial i looked at your blogs source code and think you should change the float on the #main-wrapper from right to left also you may need to adjust the width's of the columns so they fit on your background i hope this helps you

This is exactly WHAT I NEEDED. Thank you so much for writing this tutorial.

Yay!! thanks for the tutorial!!

@Cherry Blossoms
i'm glad you enjoyed it thanks for the comment

THANK YOU!!!! you are a true blessing to this "non tech" lady :D

My 3 columns are not set right, and doesn't fit my blog.
the main wrap is to large..the left is smaller then the right.
could you help me with this.

i looked at your blog and it looks like you have missed adding the left margin on the main-wrapper see this screenshot

Thanks! This worked wonderfully and your instructions were dummy proof!


May 31, 2009

Worked perfectly! Easily to follow instructions. I tired 2 other tutorials before yours and my blog was a wreck! Thank you.

lawny, should we keep our blog restricted to anybody for good after we make it become 3 templates? Or only for awhile (just during the making proccess)? because I do want everybody to see my blog of course...thx Lawny..btw the tutorial is amazing..I will try it...:)

well what do you think you should do ? if you want to allow anyone to visit your site then change settings to allow anyone

Thank you so much!! yr tutorial is GREAT!! :D

thank you. it's such an easy step since im newbie in blogging. hmm but i want to know, want would i do if i wanted to make 3 column from 2 column but use a different template (instead of minima)? i would appreciated your reply :)

hey lawny. i would love if you could give me the tutorial like this but with Stretch Denim as template. because i like this template more than minima :)

@romantic lullabies
this tutorial was wrote for the minima template so the steps would be different if you used another template i have not wrote a tutorial for the Stretch Denim template

Hey Lawny! Thanks so much for this great info. I just used it, ( but have the prob. now of all of my posts/pics being unaligned. Is there a quick fix to this?? Thanks so much for your help!

your CSS code is like this

.post blockquote p {
margin:.75em 0;
.post img {
text-align: center;
.post img { center;
text-align: left; ;

remove the unwanted code so it should be like this

.post blockquote p {
margin:.75em 0;

Hello! I am happy that I found your blog. I have been trying to have this 3 column template and your tuts is the best, if I may say so myself. Thanks for this.

Thanks so much. May I link your blog to mine? :)

I'm glad you found my tutorial easy to follow and yes you can link to my blog if you like thanks

I must be a total idiot because I have tried all these codes from different sites and I still cant get it, My layout has the post on the right and the two columns on the left. The first sidebar wont let me move gadgets to it....Please help..
Thank you in advance if you can.

you are using the Minima Lefty template and it has different codes thats why it wont work i wrote this tutorial for the Minima template

This looks really easy to follow. Do you have a tutorial on how to add the right sidebar to Minima Stretch Lefty? It seems like it should be so easy, but I feel like I am missing something in the code somewhere & I can't get it to work.

Thanks for any help or advice you have.

i have not wrote any tutorials for any other template than the Minima template because it is the easiest to start with you can always switch your template over to the Minima template without losing anything or create another blog for testing things

Bravo! After going through more than 4 tutorials, this is the ONLY one that has worked for me!

I am a chef/writer with a gourmet world cuisine food blog using the minima template.


Hi- This is by far the best tutorial for this on the web, but I tried it 3 different times and each time it adds a column to the right of my main column and pushes my existing column to the far right. I simply want a left hand column like you have. Any suggestions? I am in Blogger in Minima template.

@Petite Planet
Are you trying to create a 3 column and what is the url of the site you are trying this on ?

Hi Lawny- I tried it on my site, but was careful not to save changes until I knew it would work.

@Petite Planet
i need to see a working demo to figure out what you have done wrong you should create a test blog and try it on there before attempting it on your main blog you do not need to create another google account just login to your blog and click here to create another blog

I've tried so many tutorial html code sad coz always failure but this tutorial helps me a lot because it is so easy to understand & it works!TYVM to! :)


July 23, 2009

I used your downloadable template. One problem: it deletes all of my widgets when I try to load it/

you need to copy the widget codes from your old template over to the new one to avoid them been deleted this post might help

great..Awesome...i will edit my blog into 3 column now GOD BLESSYOU

Awl, awesome. This worked well very very very very very very well <3 your the best.

thanx but how to do this for TICTAC template m using??
visit my blog also and welcome to all for Link Exchange..

sorry i'm not planing on writing a tutorial for the tictac template

Yay!!! THANK YOU SO MUCH!!! This was very helpful for me!!!

I've been scouring the internet for days trying to figure out how to create a three column template, after rephrasing my searchwords a million and one times and feeling rather discouraged and beaten down, I found your blog and was so happy to see that THIS, this tutorial was EXACTLY what I was looking for!!

This was the answer to my question (how to create a three column template for my blog)!!!

Your instructions are very well written, I found them very easy to comprehend and follow. Thanks again and again for making my life easier!! This blog rocks! :)

I definitely will be checking back!!!

thanks for the comment i'm glad you found it useful

Lawny - Hey I'm using your Green press template and when I tried adding the 3rd column (it worked!) it pushed my content on the right column under the posts column (still on the right, but sits below a bit). You can see it on my test blog: What's the fix so both columns sit at the top of the page? Thank you so much. I know you did the work on minima, but was hoping since you created green press you knew a quick tweak. e-mail me at

there is no quick fix if you are trying to add another column to one of my templates you will need to modify most of the CSS/XHTML code by yourself unless you want to hire me

yay..thanks for the post!! its workin...i use it on my blog...
thanks btw.. ;P

thank you sooooo friggin much for makin it so simple and easy! u just cured my headache lmao

I am computer spastic and it worked for me the first time!!!!

Thanks a billion!

Great tutorial... thank you!!!

I did this and it shows it correct in the layout section but them when I go to view my actual blog it has HUGE gaps in between the different columns. It also only shows 2 columns instead of three even though my editing section shows three (2 sidebars and the post section in the middle) I must have missed something or did something wrong. HELP!

you need to add a widget to the new sidebar and save it before it will show up


I have been checking out other tutorials but yours is perfectly aligned and centered unlike the others I've tried. Thank you!

if you would like to center your blog description remove the max-width:700px; from the CSS i have just updated the tutorial to include this

wow!! I made it...! thanks...

Thanks so much, I had tried a few times to change Minima to a 3-column format and this was the first time it actually worked! I think I am starting to understand a little bit about what HTML means too.

I was searching the net for a tutorial on how to add a 3rd column.Tried a few but they did not work and was extremely hard to follow.Until I found your website :).Thank You So Much for posting this tutorial.It was very easy-to-follow and the step--by-step pics helped out alot.I was able to incorporate this into my blog. :-D

Again Thanks & Keep Up The Good Work!!!

glad you found my tutorial easy to follow thanks for the comment

Thank you for this post. It was really helpful and pretty easy to follow, especially with the pictures. It really made my blog look very sharp and nicely organized. I even figured out how to make one of my columns wider to fit in some html widgets. Keep up the good work!

Thank you so much, this tutorial really helps me a lot... it's works....thanks again. keep it up yaa. =))

Thank you so much, I've successfully switched to a 3 column blog!

Wow! I actually did it! Thanks so much.

I did everything you said. It won't work for me.

thanx u so much
your description help me a lot ^^

it has worked fine for me and other people maybe you made a mistake in the code somewhere

@Lawny well i have the 3rd column but its off a little. i took screen cap

that is the page element tab which is not the actual layout

sure its very useful to me,thank you

I started with another tutorial but I made a mess, I was so lucky to found yours, now my blog it´s the way I wanted it to be!
thank you!!!

Thanks so much for the tips. It works for me too.

I thought I did this write but I'm having trouble. Can you help? I have the three columns but the BLOG POST column is on the far RIGHT and the 2nd sidebar column is in the middle. Help?!

Thanks, I'm trying now.

you must of made a mistake somewhere in the code

Thanks a lot Lawny! The blog that I was getting this info from, went private on me. :( Your's was much easier to follow than there's was anyway. Thanks a lot for the time you have put in to this.


I used your tutorial on a trial blog and it worked very well! Then I tried it on my blog and it worked fine, except for one problem: the default sidebar has been moved to the bottom of my posting section. I even used the same template for my trial blog as I did for my real one.. Can you help maybe?? If you wanna see the problem yourself, the url is


thanks for the comment

i assume you have fixed the problem you was having ?

Nice tips.....

Thank you soooo much! It worked great and, in fact, your instructions gave me enough knowledge to modify the column widths just enough to make them work with my chosen blog background beautifully.

Thank you again! :)

Hello, thanks for this tip.
Would u help me with my template. I downloaded of your webpage, and i wanna change to two columns if it is possible (i do not want put in a new one)

Regards since Spain
In this blog

I used this and it worked great-- thanks! Is there a way to get my pages all the way across the top like the header? Please email if you know a way to do that. Thanks!

Cảm ơn nhiều Lawny. This is my first customized template I've ever made. I am a brand new blogger. please help a little more. I want border lines between sidebar-wrapper and main-wrapper. Email me as you can. Thank again.

Thanks a lot, it actually works!!!!
Amazing tutorial, now my blog looks so much better :D

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2019 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger