Another Three-Column Template
Some time back, I wrote about how to modify the default Blogger template for a three-column layout, with a link to a completed template for those not inclined toward hand-coding. The template I provided works fine in Blogger but isn't appropriate for conventional web sites because of the embedded XML.
I've noticed a lot of people searching on this topic in my stats, so here's a 3-column template for regular web sites. This template creates a barebones tableless three-column layout using CSS. The design is minimal, with dummy text to illustrate where your content will appear.
To put your own stamp on this design, just save it to your desktop, open it, modify the styles as needed, and substitute your copy for the placeholders. If you're hand-editing the code, be careful not to delete any of the DIVs, or you'll break the layout.
Hope this works for you. Feedback welcome. And if you're finding these posts useful, please support Random Bytes with a link. Sign up for our feed to ensure you don't miss future articles.
24 comments:
I love your blog! Nice template with interesting article
Thanks Jerry.
That is a great template. I love the 3 column design on mine too. I wish I had your template when I changed. Great links and blog. Very useful.
Thanks commenter. What a novel concept .. a blog that exists just to say nice things about others. Feels great to be on the receiving end of such random acts of kindness. Feel free to drop by often :-)
You helped me switch to a 3-column template. Thanks a ton!
And so I've linked you of course. :)
Thanks Ensie. Glad I could help.
Hi there,
You have a very informative blog, thx for all the available tips. I have been ripping around your blog trying to figure out how to modify my blog, but rather than three columns I would prefer two columns. Not sure if you can lend a hand, for me it is technically difficult but it might be quite simple for you.
Anyway, if you go to my blog http://shaundoreenevankeegan.blogspot.com/ you can see I have two columns and I am trying to maximise the space usage of the written content on the left and then have an empty space between the content and the sidebar (I would like the sidebar to be a bit bigger). My main focus on spacing is to have the written work (on the left) occupy the same amount of space as two photos side-by-side - essentially I don't want any wrap-around. Does that make sense or was it a horrible explanation.
I have been working on it for approx 100-200 attempts but can't seem to achieve it.
I would owe ya... ;-)
IE completely screwed up my other template and i was looking for a new one today. I am so glad I came across your site.
Thank you.
i love your 3 columns minima template. You can see it in my blog, i used it and i am thrilled. But people who use IE (I use Firefox) say the right column breaks. Do you know the fix? Because i really really like it and want to stick with it. Thanks! :)
Wow - thanks to your sample template and a lot of tweaking I finally managed to convert to 3 columns. Thanks! Although I still have so much to do!
Thanks
Jon
www.itsthefinalword.blogspot.com
Lisa and Jon.
Thanks for the kind words re the template. Glad it's working out for you.
Chloe, a few others have reported problems with the right column dropping down. This could be due to a couple of things:
1) changes you have made to the widths, padding, or margins of the columns within the template
2) images or other non-wrapping or too-large items within one of the sidebars. I have seen this in my own blog with the text input field of a form (solved by shortening the field length) and later, caused by image alt text when a linked web badge didn't display.
So it can be all kinds of things.
One of the biggest challenges in CSS is browser inconsistency. Microsoft calculates the cumulative width of columns, borders, padding and margins differently than standards-compliant browsers. Even Firefox can have strange glitches when you resize the window.
The easiest fix is to increase the width of the main container div, or adjust the width, padding, and/or margins of the three columns so it adds up to just less than 100%. Reducing the font size slightly might also work. It also may help to use em for font-sizing, as these are relative to the body font size.
Another, more complex, fix is to use IE conditional comments to provide an alternate style for IE 5.x or whatever version is causing the problem.
Test in different browsers, and at different window sizes and screen font sizes.
Watch for a post on this in the near future.
Hi Shaun, I'm sorry. I have read and re-read your description of what you are trying to achieve, and I'm not getting it.
Can you clarify: Do you want two columns of equal widths? What do you mean by "written work"? The sidebar content or the descriptions under the paired photos?
A clearer explanation would help. Perhaps you could sketch the layout and throw it up on Flickr.
Hey Pam
I mus thank you for sharing the code for 3-column. I used the code, modified it and I am too happy to finally have 3-columns in my blog.
I have also referenced your articles here..
sinha
Glad to help. Thanks for the link.
Pam,
Your site is a godsend. Thank you for your expertise and patient explanations. How did you get the lovely black-lined columns that seem to float over your background image? It makes for a very readable blog. Do you ever design other blogs for compensation or links?
Best,
Zachary
www.nearista.com
Hi Zachary. Thanks for the kind words. The blog look and feel is controlled by a modified template, which I have published here.
You'll find some information about making background patterns here. Hope this helps.
This is a great article. I used it as one of my references while moving to a 3 column blog myself.
Thanks Sowmya. Glad to help.
Thanks so much for posting your entire template for the three columns. Here's what I did. I'm not quite sophisticated enough to figure out color gradiating and the rectangle tiling thing. But never say never.
Hi Jill,
I like what you did with it. Thanks for the feedback.
Thank YOU, really. I have heard from a Safari user that the ad thing on the top left is bleeding into the main posts, and another friend informed me that IE was getting strange looks too, but I think I fixed that. The Safari person suggested that I just move the ad to the right sidebar - no rush but if you have any other suggestions, I'll keep my eye out over here. I did add your blog to my roll. Very helpful stuff, thank you for sharing.
Hi Pam,
Your site has been VERY helpful in converting my blog from two to three columns, thank you!
I noticed the permalinks are slightly different and now my blogger text title is appearing underneath my image title. It only occurs on permalink page.
Is there an easy fix to remove it?
Thanks!
Hi Jill,
Just took another look, in IE 6, and everything looks fine. Nothing's bleeding over. I can't check in Safari, as I don't use a Mac. Blog looks great -- interesting content too.
And thanks for the link :-)
Hey Jeff,
Glad to help. I can't see your blog, because your profile is private, but try this technique shared by another reader:
Open your template and find the section that starts with
<div id="header"> and delete this: <$BlogTitle$>.
Hope this helps.
Post a Comment