Fluid 3 column Blogger template
I was inspired to the point of acting on it. The post by George Mikos made me realize that I wanted had to have a fluid CSS template. The thought of my blog expanding to fit each and every reader's computer display was very tempting. So, throwing caution to the wind, I jumped in.
It was relatively simple. Realizing the sum total must be 100% and I had three columns...two sidebars and the main content...I did some simple math. I first addressed the entire content:
- left margin 5%
- right margin 2%
- width 93% (this 93% contains the main and two sidebars)
- main 50%
- sidebarleft 22%
- sidebarright 22%
- 6% for the space between the columns
To actually edit the template, I located #content, #main, #sidebarleft and #sidebarright in my style sheet. In each one of those I edited the width property by removing the px value and replacing it with the % value. For example:
#main {I tried different percentage amounts for the sidebars and main, until I found what I liked.
width:410px;
float:right;
}
changed to:
#main {
width: 50%;
float:right;
}
There is controversy over fixed vs fluid design. I had fixed and was never really happy with the way it displayed on different displays. I like the fact that now my page looks like it was made for each and every display. No large expanse of unused whitespace. I know...I like whitespace as much as the next person. It is striking when it is part of the design. Not when it is only there because of the limitations of a fixed template source.
Then there are schools of thought on the optimum line length for ease of reading. Some say 12-15 words are best or 55 characters. Others say longer lines are better. For me, I don't think it will be such an issue because I have three columns. But, I do have another little trick in mind, and I will write about it when I get it working!
So, let me know what you think. What computer display you use, and how do you like it? Any suggestions?
66 Comments:
Since discovering your blog, I've always envied your 3 columns. Now, I really dig the fluid more. I use 1280x800 and it fills up the space nicely.
This really makes me hope that Blogger releases some 3 col templates soon!
Good to hear it looks nice on another display. I use 1024x768 and I like the way it looks on my screen also. I personally love the three columns. My blog is about giving information, and links is a big part of that. An extra sidebar helps in that aspect.
I think many people are hoping for Blogger to release some fresh templates!
Hey annie! I love your blog but I've had trouble with my Blogger template. I can't seem to get the 3 column thing to work.
@metalheadhunter, I'm sorry for missing your comment. I was on vacation, and it slipped right past me! You have a couple of blogs. Which one are you trying to get 3 columns? Let me know, and I will check the code. (May be a few days again till I have the time to look at it.)
Hi there, thanks for having such easy to follow instructions! I am having a couple slight problems, though, with my 3 column layout on my blog (Life - or Something Like It).
1) I'd like to get my header picture aligned left.
2) My right sidebar is showing up at the very bottom of the blog, rather than alongside the main section.
Would you be so gracious as to help me out? Thanks so much!
Jen, in your template find:
#header {
width:1000px;
margin:0 auto 0px;
border:1px solid #ccc;
background: #fff url(http://i93.photobucket.com/albums/l62/jkidney/ConvergingPaths.jpg) no-repeat center right;
}
and change the no-repeat center right; to no-repeat top left;
I think that may align your header to the left. I'm sure there may be other ways but, that one worked for me.
About the sidebar...that is called 'Float Drop'. Read Your sidebar has a case of 'Float Drop".
I hope this helps. If not email me and we'll figure it out!
Hmm, I was thinking about making fluid columns in my blog for a while, but I've finally decided to let it go.
I like the look at it now, because it gives me some kind of imagination of having a sheet of paper lying in front of me, if you know what I mean. On the other hand it's cool how fluid columns like yours fit exactly to every screen.
@alastor, I completely agree and understand the need for complete control. Also, it totally depends on your template and the look you are going for.
Hello from Spain! Where can i find a template like this one? I love it. Great work!!
@Manuel from Spain! Hi! To get this you can modify the regular Minima Template with the instruction on this post. Most of the modifications I did to this template, I made posts to show how.
Or check out my template section (far right sidebar, bottom) for Blogger Templates by Stavanger. He has many 3 column templates.
Or, you can view my source and work with my template. Choice is yours! If you need help, let me know.
hi, i have been following the directions about this topic but i have still the difficluty in trying to fix my newly chosen 3 column template but my entries dont show at the top, insted its down there after the side bars. may u take a look at it even for s short while that i may be helped? im a novice with css and html, even with blogging, thank you. Merry Christmas :)
http://recedo.blogspot.com
@vince, I took a look at your blog and it seems to be working fine. Posts at the top along side the sidebars. Guess you figured it out!
I've got three fluid columns going also, but am not totally satisfied. What I'd really love is for my sidebars to be a fixed number of pixels wide, and my middle column to expand to fill the rest of the space, but I have no idea how to accomplish that with my nonexistent programming skills. Any ideas?
A second question - how did you do the tag cloud?
@blahdiblogger, I don't know about the partial fluid template. You may have to ask someone with more knowledge than I.
As far as the tag cloud, go to your dashboard/ template/ page elements/ add a page element/ labels/ add to blog.
hi annie;
possibly you should mention that, in order to add any page elements to the page, one also needs to add the element in the code part of the template. possibly you've written about this elsewhere, but i do not see that part of the hack in your post.
for the sake of brevity, i will just point readers the hans, who explained the process of adding a sidebar bar (tho with a few minor changes the same process could be extrapolated to adding a widebar, too) nicely. once the element exists in the code, it will appear on the page. obviously, be sure to call the element the same name in the widget code and in the style sheet.
thanx so much for this fluid idea. you have inspired me to try it out and i have begun to convert some of blogger's templates. once again, i tell you, girl, you ROCK!
sorry for taking up so much comment space ... just wanted people who read this to be clear.
regards ....
@the.red.mantissa, I think I covered that in these posts:
A Widebar - Fluid Style
Postbar - something new!
But, thanks for bringing up Hans post. He is so good at codes and hacks!
I'm happy to know that you are making 3 column templates. (hopefully fluid??!!) If you do, let me know and I will add a link to your templates in my Template section.
And don't worry about the length of your comments. I love a wordy comment :-)
re: templates. yes - they are all fluid with widebar and 2 sidebars. and peek-a-boo navabar. (and credit given where its due, of course).
here, in my my nerd blog, i have some screen shots. i will edit the posts to include a link to a live preview for each screen shot. JIC anyone is interested.
a link would be faaaabulous! also my own blogs are fluid with 3 columns - FYI.
@the.red.mantissa, Awesome!!! Lovely fluid 3 column templates. Your link has been added to my template section.
Its really nice template. How do my blog(http://healthtreatments.blogspot.com) with 3 column looks like ?? Is it fine ?
Best Regards,
Eliena Andrews
@lovely, it looks great. Good job.
Your blog is a great source of information for me - a big beginner. Thank you very much.
hi
i was looking for a blogger template like you have . can you provide me this template coz it is fluid.
I thought first to donate to this site but currently i don have money in my paypal account. But in future i will surly donate. Keep up ur nice effort . God bless you.
My email id is freebooksdownload@gmail.com
After uploading your template at my site i will like back to you from my site http://freebookie.blogspot.com so peoples will also know that this template is provided by you.
Looking forward for your help.
Regards
Arun
the template looks really nice. i use 1024 by 768 resolution and on it i'm not facing any prob. i also like 3 column blogs. it feels me more detail.
Thanks for the great tip! I have linked to this post
Hello Annie!
Thank you for the tutorials you have here. They're a great help!
I would like to know, is there a way to add content (like another sidebar?) to the right of the header image? My blog is at http://cleanandsleek.blogspot.com. Please take a look. I hope you can help me.
Thanks and more power!
Hey Annie!
Thanks for the tutorials on this blog. They're a big help.
I would like to know, is there a way to add content to the right of my header? Sort of like another sidebar? My blog is HERE. Please take the time to visit. It's still under construction though.
Thank you and more power.
nice blog!!!!
but where can i download the template from?
plz checkout
http://www.supershiva.blogspot.com
http://www.versatilecollection.blogspot.com
@Shiva, You make the changes mentioned to your own template. I used Minima.
Hi, i am new to blogging. Saw your comments but still do not get it when I refer to my blog. U see I downloaded a template and I want to increase the width of the posting and the width of the side bars... by referring to your notes I try to adjust but cannot. Is there any other way I can do it? Please advice. Thanks
@SAM, if you give me the XML file of the blog you are trying to modify, I wll take a look at it.
Hi again,
I am trying to do this fluid template but for some reason I also cannot find the one you indicated there...I am also new and I wanted to adjust the width but the page always breaks up when I adjust the width. I just see in my template sidebar wrappers and main wrappers, I saw a sidebar and sidebar2 but they don't have a width indicated just the margin and padding...I hope you can help me also. Thanks.
@keneshea, is this the link you can't find:
My blogger Template? It is up now. Read that post. It is extremely informative.
Your blog is displaying wonderfully in Firefox. Sometimes IE has problems...check to see if you have an image, a link that is too wide for the area.
Very cool! This is what I am looking for, but I want the main content column in the middle, with the thinner columns on either side. How would I adjust the template to display this way?
hello annie! do you think this 3 column thingy would work with the layout/template i have now? hope you could help! thanks
Hi Annie, thanks for the tip!
When I resize, I sometimes 'lose' the right hand column (the contents disappear to the bottom.)
Do you have any idea why this is happening or how I can get rid of it?!
Also, Can you spot where I'm going wrong with my header - I want it to be centered not hanging to the left...
Thank you!
- Kittie
@Kittie, Read this for the disappearing sidebar problem: Your Sidebar Has a Case of Float Drop, even though I didn't see the problem you mentioned on my monitor.
As far as your header problem, I would put it in using the dashboard | layout | page elements route to add the header...it should center it.
Or, look for this in your template:
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner' style='background-image: url("http://laura.paterson.googlepages.com/banner_no_words.gif"); background-position: left; width: 900px; min-height: 155px;_height: 155px;background-repeat: no-repeat; '>
and try changing background-position: left; to background-position: center;
Thank you
Visit
http://moviebindas.blogspot.com
Hi. I tried to follow the directions here, but I can't seem to find the #content to change. Here is my blog that I am trying to do this on:
MyBlog
I sure hope you can help as I am really stuck! Thanks.
Hi Annie!
When I created my blog, I played a bit with the HTML (minima lefty stretch) and added a third column on the right... Everything was working smoothly for about 7 months, when two weeks ago the Middle column (the one containing the actual post) started to appear alligned exactly BELOW the Left column... and the Right column followed as well, appearing next to it (way down the page, but at least aligned correctly, to the right of the page)
Its as if something is pushing everything except the Left column down... I have no idea what is causing this, and I would very much appreciate if you (or anyone else) could help...
the address is:
http://my-daily-laughing-dose.blogspot.com/
thanx so much
alex
@Alexis, I suspect that something you added to a sidebar was too large to fit. I would go back and remove items one at a time until I found the culprit. (Do you remember what you added at the time the post dropped?)
The 3 column fluid width site looks so slick. I think I will eventually have to switch all my sites over which will be no easy task.
i had some difficulties but with some playing arround and some search i got it like i want .thanks annie
Thx alot! I just started my blogging activity, and this post seems to change my direction from wordpress to blogspot (thx again, and sory 4 my bad english)
i like fluid. it better viewing which every screeen :D
There's always going to be a debate about fluid vs. fixed designs.
I think your fluid design works well. Our blog is going under a facelift and we're probably going with a two-column fixed design.
Maybe in the future, we'll go with fluid. I think fluid is going to be the hot trend soon.
dear annie,
it's very thoughtful for having a fluid template to fit any screen
as for me, I like the fixed one (as long it's not too small), for my convenient in reading (i have 1280x800)
the fluid is a bit too wide for me,
so I kinda have to "split" the blog into 2 parts; the post & the widgets, and i have to turn my head a bit from post-widget, widget-post :)
Hi annie, thanks for the info. I'm sorry I need some help regarding placing tabs on my blog. Do you have script that I can use to make a tabs on the top side of the blog? Please advise.
Thanks & Best regards,
Andi
mantap thank you
The problem with fixed is that you can never properly check it on every possible display. But then again the same's true for fluid. Only if fluid screws up on some screens, the website can easily become impossible to navigate.
Like this blog and the owner. :)
You have done a lot of things for the customization of this blog. Many articles are so useful to others. Very informative and practical info. Thanks a bunch!
May this be handle with pure html unlike using css seprate or using inline css
Hi
I Love your template.
Thanks for the info.
Fluid 3 columns is the best config.
Ha, So simple? After thsm, I will try it.
Very informative and practical info........Do you have script that I can use to make a tabs on the top side of the blog?
Outsatanding, i am going to use it in one of my blog. thanks and keep posting.
I am having a couple slight problems, though, with my 3 column layout on my blog. Everything was working smoothly for about 7 months, when two weeks ago the Middle column started to appear aligned exactly BELOW the Left column.
location villa bali
I've sometimes found that "float" tags cause weird behavior and that everything doesn't always end up where you'd expect it to - do others have that problem?
I like 3 column layout. I had a couple of years fluid 3 column layout, now I have fixed layout, because fluid is very complex. Problem is becoming when mixing pictures width text. Paragraph html tag can stretch width of column, but image can't. So I prefer fixed.
very nice information. thanks
Thank you for the advice, I was looking for the solution.
i like that template. it is really slick. mind if i steal some ideas from it?
@Doug, go ahead...that is why I post all the tutorials!
wew..nice work...where i can find the template
Hi Annie!
I created a background for my two column blogger template but can't for the life of me get it to fit all resolutions. Do you have a tutorial for this? Thanks!
My blog is http://exam-schedule.blogspot.com. I want to use a fluid template for it. How, and where to start?