Equal Height Columns Template for Blogger. ~ The Blog Doctor.

Equal Height Columns Template for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Blogger has many templates which you can pick by going to Pick New Template under the Layout tab. At present all templates are two column templates. These have a main posts column and a sidebar at the right or left for your Profile and Archives and other widgets you wish to add.

They can be easily modified to add a third column in three steps. These column are however of unequal height. The height of the column depends on it's content. If you add more content to the sidebar it increases in length and then you have to add more posts so that the Main Column has a matching height. Other templates are available with faux columns to give an impression of equal height.

Here is a template with equal height columns : See picture below :

The columns do not end at their content...........

You can download template here. To download the template right click on the above link and choose 'Save Target As' in Internet Explorer and 'Save Link As' in Firefox browsers. Save the XML template file to your PC.

To load the template :

1. Login at Blogger.com.

2. Click Layout link on Dashboard.

3. Page Elements tab will open.

4. Click Edit Html subtab of Layout tab.

5. Edit HTml tab will open.

6. First Backup your Template. Then backup you widgets. Then click Browse button.

7. Explorer window will open. Navigate to where you hae saved the XML template file and select it and click Open.

8. Click Upload button.

9. You may get warning that "Widgets are about to be deleted!". No need to worry since you have already backed them up in Step 6 above.

10. After new template has loaded sucessfully you can readd your widgets. You can also try the alternative method of loading a template without deleting widgets.


Anonymous said...

Thanks for this template:) I love your blog with its enormous fonts and great number of links and tags!

Anonymous said...

Choosing a template can be very difficult. There are many nice ones out there. Just like this one. keep up the good work.

Rob said...

Midgets, Widgets, 24/7 Chaos..you printed it already I think, as well as Computer 101 from Cuckoo Nest U. Your blog is a breath of fresh air. I did not run 90 yards for the touchdown but wish I had. Check out the excavator-price of progress

Anonymous said...

Hi there!
This is a really cool template but I am actually looking for a tip on how to modify my template to have equal height columns.
I also want to say that I like your blog. Thank you for sharing those tips. There are really helpful.

Vin said...

Another Computers Blog,

That is almost a project depending on which template you have!

Wretha said...

Thanks Vin, like a previous commenter, I really wanted to alter my code to make the columns go all the way down, I tried and it didn't quite work, so I copied the entire code into another test blog, edited it to make it my own (graphics and colors) and it works great! Check it out if you want:

Here is the one I tried to edit but it didn't work right:

These sites have a really neat JS code that makes the background change based on the time of day, anyhoo, thanks, you get a permanent link on my main blog.


Anonymous said...

Accordinly Blog Dummies i tried for "equal Height columns Templete fpr blogger" but failed. error message comming out that: contents is not allowed in prolong.

Exactly I don't know how to solve it,Please could you..try it for me.


Vin said...


Exactly what steps did you follow to load the XML template?

Anonymous said...

Hi Vin, this kinda work but somehow, the columns just keep going forever and they aren't equal in the end. Have a look: www.mtlfred.blogspot.com/
What am I doing wrong?

Vin said...


How did you implement the template?

Anonymous said...

Well, I probably cheated on that one... I downloaded your file and looked for the part that differed from my template and added it in. The code I added starts with: '#threeCol' and ends up with:'#main-wrapper, #sidebar-wrapper, #sidebar-wrapperL {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important; '
I guess something must be missing and I should implement it the way you're explaining it. It just seems a hassle to back up the widgets. Thanks again.

Unknown said...

how do I make my main column wider. I widened the background width for both columns but the columns themselves are still the same

Vin said...


You seem to have increased the width of the outer wrapper only.

Give temporary borders to your columns to see their width.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.