Wednesday 30 August 2006

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)
I then assigned these values: (Follow me here. This is 100% of the above 93%)
  • 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 {
width:410px;
float:right;
}

changed to:

#main {
width: 50%;
float:right;
}
I tried different percentage amounts for the sidebars and main, until I found what I liked.

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?

post signature

No comments:

Post a Comment