Fluid Width Three Column Blog Template. ~ The Blog Doctor.

Fluid Width Three Column Blog Template.

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

Many bloggers have been asking for a three column template. So I brushed up on my XML and XHTML and made a fluid width three column template.

A fluid width template is one which fits all screen resolutions without breaking. The columns expand and contract as the window is resized. You can test it out by going to The Fluid Width Three Column Blog and then type this in address bar of the browser without the quotes :


and press ENTER on keyboard. The window will resize to 800 x 600 resolution without having a horizontal scrollbar at the bottom..........

You can see the full view of the blog below :

The widgets seen above are not loaded with the template. You have to add your own widgets after uploading this template. Remember to backup your widgets first before changing templates. After resizing it looks like this :

Download Link : Fluid Width Three Column Template. As you can see there is no horizontal scroll.

Right Click the above link and choose 'Save link as' and save it on your PC. Upload to your blog as shown in How to Change Template.

I have also included a Navigation Bar at the top where you can add links to your important posts. To do this login at Blogger.com and click on Layout on Dashboard. Then click Edit Html subtab of Template tab and scroll down to this code in the template :

<div id='Nav'> <a href='BLOG_URL'>Home</a> | <a href='LINK TO SUBSCRIBE POST'>Subscribe</a> | <a href='LINK LABEL 2'>Label 2</a> | <a href='LINK LABEL 3'>Label 3</a> | <a href='LINK LABEL 4'>Label 4</a> | <a href='LINK LABEL 5'>Label 5</a> | <a href='LINK LABEL 6'>Label 6</a> </div>

Change the code in red to the respective links to your posts. You will have to create and publish these posts first and then copy their links and paste them in the above code.

At the bottom of the template are links to 'About Us', 'Contact', Sitemap and Privacy Policy which you can modify in the template by scrolling further down to this code :

<div id='siteInfo'> <a href='LINK TO ABOUT US POST'>About Us</a> | <a href='LINK TO SITEMAP POST'>Site Map</a> | <a href='LINK TO PRIVACY POLICY POST'>Privacy Policy</a> | <a href='LINK TO CONTACT US POST'>Contact Us</a> | <a href='http://betabloggerfordummies.blogspot.com'>Blog Design</a> | 2007 Company Name </div>

Change the parts in red in the same way as before. I know you will be gracious enough to leave the credit intact.

Another version of this template for those who do not want the stretch version looks like this :

The download link is Fluid Width Central template.

Search Engine Optimized Advantages

This template is optimized for the search engines as :

1. The posts column comes first and hence the search spiders first feed on the content.

2. NO JAVASCRIPT in the template making all the links in text and indexed by the search engines.

3. Follow further tips for SEO for blogs to further customize this template.


Webworm INTech said...

WOW...amusing !!! your blog really impressive...Thumbs up for you...

FYI, BlogRush launched 3 days ago...FREE service...Drive traffic to your blog via BlogRush...Try this...

Tarun said...

I read your blog and thought I could tell you about something else which would be useful for seeing maps and directions in India.

I am writing to tell you about MapmyIndia.com, a free interactive maps and directions portal for all India. See the map of connaught place, new delhi, get directions in mumbai from nariman point to juhu airport, and find nearby ATMs in kormangala, bangalore.

As a company and individual enthusiasts, we dream only of solving the problem of reliable directions and navigation for India. For your blog specifically, you can map enable it by using our youtube-style embeddable maps, and links to specific searches (of maps, directions, local and eLocation) on MapmyIndia.

Do give us feedback, suggestions, or get involved yourself by mailing me back at tarun@mapmyindia.com or marketing@mapmyindia.com.

And if you find the different services useful, we would be grateful to you for writing and telling your readers about us.

Warm Regards,
Tarun Gupta
The MapmyIndia Team
For directions in India, just search print and go with MapmyIndia.com

j said...

I try to link to http://betabloggerfordummies.blogspot.com/2006/11/download-three-column-beta-template.html%20, but... "Error 404". And it rains here.
Your blog is wonderfull, my friend. Thanks.
From so far away, best regards. j

vin said...


If you wish copy this and paste it in a Html page element :

<a href="http://betabloggerfordummies.blogspot.com/2006/11/download-three-column-beta-template.html">Download Three Col. Beta Template</a>

Monday Morning Power said...

Once I realized the issue was with my PC and not with your template the rest was easy. It works GREAT. Come on by and take a look. There is a lot more customization that I need to do. But, THANK YOU, THANK YOU, THANK YOU!!!!!! www.sywtc.com (This auto-directs to my blogspot site.

Jenaisle said...

Hello Vin,

I downloaded the three column template and it seems okay, except that I do not know how to create links within my site..and I cannot find the "ADD TEMPLATE" feature where I can add new items. How can I create links to my posts? Thanks for all the help. You have been very helpful.

Vin said...


First you have to create and publish posts. Then get their Permalinks to put in the template.

To get the Add Page Element button try clearing the cache. See :

Clear the Cache.

Use Firefox browser. Also enable Javascript option in browser settings.

Jenaisle said...


It was an error on my part why the meta tag was not detected. I typed the wrong URL of my blog. Now it is fine..Hey, visit the blog in which I used the three column that I downloaded from your site. The address is:


Thanks a lot for all the help.

Jennifer said...

I downloaded the fluid width three column and pasted it in the Edit Template window. This is the message tht I get:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The document type declaration for root element type "html" must end with '>'.

Do you have a remedy?
Thanks in advance

Vin said...


Do not copy-paste. Right click the download link in the post above. In dropdown menu select 'Save Target As' in IE and in Firefox select 'Save Link As'. Choose a directory on PC and save the XML file.

Login at Blogger.com.
Click Layout link on Dashboard.
Click Edit Html subtab of Layout tab.
Click Browse button under "Backup/Restore Template".
Navigate to place on your disk where you saved the XML template file.
Select the XML template file and click Open.
Then click Upload button.

Lindsay said...

I have successfully downloaded and applied this template...now I would like to change the background colors of each of the columns. How can I do this?

Thanks for a TON of help!

Vin said...


Have a look at Tips to Customize the Blogger Template.

Jain Lemos said...

Love it, love it, thanks for being here for us.

Is there a three column template with the posts column in the middle?

Vin said...

Jain Lemos,

Have a look at :

Three Column Template in Three Steps.

krilin said...

Hey Vin,
THANKS first of all, but can u tell me how do i change the 'label 2' to some other title...I clicked on it & got HTTP 404 NOT FOUND...PLS HELP.

FourOf5zs said...

I got the three columns just fine.

As you read the following bear in mind that I know very little html and nothing about any other code.

I would like to know how to get rid of the navigation bar and the black bar at the bottom of the page. Also I would like just a bit of space between the edge of the main post and the writing.. and same on side bars. The right side of each is the spacing I would like. My blog: http://fourof5zs.blogspot.com/

Vin said...


To get rid of the Navigation bar go to Layout---->Edit Html and scroll down in Template Code box until you see the code shown in above post and delete it.

For the black bar change this code :

#footer-wrapper {
padding: 10px 0px 0px 0px;
border: 1px solid #333333;
background: #000000;
width: 100%;

to :

#footer-wrapper {

For the padding change :

.sidebarR .widget, .main .widget {
border-bottom:1px dotted #333333;
margin:0 0 1.5em;
padding:0 0 1.5em;

TO :

.sidebarR .widget, .main .widget {
border-bottom:1px dotted #333333;
margin:0 0 1.5em;
padding:0 10px 1.5em;

Do consider putting in a link to this blog also.

Anonymous said...

Vin and others

I downloaded the Fluid blog

However, I uploaded to blooger, but there is not a post box that comes up to allow people to post a comment?? Any aid would be great!

juneblackey AT Gmail DOT COM

Vin said...


First enable all comment settings.

Then backup widgets.

Then click on 'Revert widget templates to default' link at the bottom of the Template code box on Layout----->Edit Html subtab.

Anonymous said...

hi, vin.

i downloaded your fluid three-column template and it worked fine for me. i was able to customize the nav bar links and other elements.

i have a question though. whenever i change the color of my post titles through the fonts and colors setting, the links in my blog also change their color. and i cannot set the link color to a color different from the post title color. can you help me?

thanks in advance...


Vin said...


Check out How to change the link colors by modifying CSS template.

Anonymous said...


thanks for answering my question. :-)

i want to ask another... how do i show the quick edit tool in the posts? i already have quick edit enabled but the icon is not displayed at the bottom of the posts...

(this is still the fluid width template)

thanks again!


Vin said...


First Backup Your widgets.Then click on 'Revert widget templates to default' link at the bottom of the Template code box on Layout--->Edit Html subtab.

Karen Meirs said...

Hi Vin - this is a fantastic resource, you've put in an incredible amount of time to help a huge amount of people, It's nice to know this type of thing exists! I just started a blogger blog, and would love a 3 column one. It seems to be a fluid template, when I tried to use your "3 easy steps", none of the code to look for matched what I found in my template. It's the Stretch Denim Light template.
Any help for this one?
Thanks! Karen

Vin said...

Karen Meirs,

Create a test blog and load this template on to it :


Customize it and then download it and upload to main blog.

Karen Meirs said...

Hi Vin - I used the template you gave me, Thanks! The only problem I have now is that the comments link is dead, and I don't know how to fix it. I've gone thru your posts on comments, and the code doesn't match up in the same way. It's in a different order, in different places.

Thanks for your help!

Karen Meirs said...

Hi Vin - I fixed the inability to post comments by choosing the "open comments in pop up window' option. I'd rather have them embed below the post. Can I do this with your template?


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.