So just what is the difference between fluid and fixed?

Posted by Michelle Laycock on Friday, February 22nd, 2008

Blog Banners will fit on a blog differently depending if the layout of the blog is fluid or fixed. Perhaps you don’t completely understand just what is meant by "fluid" and "fixed".

Allow me to take a moment to explain.

Your blog doesn’t necessarily look to others the same way you see it on your monitor. Not everyone uses the same combinations of settings and software. Some variables include:

  1. Differing screen resolution on the monitor
  2. Browser (Firefox, IE, etc.) that is used to view it
  3. Operating system on the viewers computer
  4. Toolbar Size
  5. Browser window "maximized" or not

These differences affect how a blog layout looks to others. This is where "Fluid" and "Fixed" come into play.

Fluid Layouts

Blog templates with fluid layouts are the most accommodating to viewers with a wide range of the variables listed above. The blog will fit in any size of browser window with any resolution and the viewer will not need to use the horizontal scroll bar to see the right side of the blog.

What does this mean for your layout and blog banner? Simply this. The banner cannot be "centered" in any way. There is no "right side edge" to your layout. Nothing can be centered without having both a left and right edge. Therefore, your blog banner will be located flush with the left margin of your browser window.

For some viewers, the banner will appear completely centered. Some other viewers will see space after the banner, but will not have to scroll with the horizontal bar to read your blog because the paragraphs will "wrap" to accommodate the text on the screen. If the viewer with the space at the right side of the banner reduces the size of their browser window, the banner will appear centered.

Fixed Layouts

A fixed template layout will have both a left and a right margin regardless of your monitor size or resolution. Lets say your sidebar is 300 pixels and your main column is 600 pixels in a fixed layout for a total of 900 pixels width. If a viewer has an 800 pixel width browser, that person will see your blog with the right side cut off. To read the remaining 100 right edge pixels of your blog (or view your complete 900 pixel blog banner, they will have to move the horizontal scroll bar to the right to see the right side of the blog and banner. If someone has a 2,000 pixel width browser, your blog will be completely visible (unlike the 800 pixel browser) but will appear smaller on their browser window. It won’t "fill up" the space but instead will have a very large "background".

Which is better?

This is simply a personal preference. In my experience, Fluid blog layouts work best for me. I simply want those with smaller browser windows/resolution to be able to see my entire blog without using the scroll bar. Those with the larger windows can reduce their window size if they want to get rid of the space after the banner. Fluid layouts will always show the entire blog regardless of variables, whereas Fixed layouts may appear cut-off on small browser windows or too small on large ones.

Best thing is to experiment with what you think looks good, but keep in mind many people will not see your blog the same way you do!

In the next post I will list some examples of both Fluid and Fixed banners!

 

%Blog Banner %Stampin Up Demonstrator

Share This Post

Filed in Layouts and Templates |

2 Responses to “So just what is the difference between fluid and fixed?”

  1. Kimberley Morrison 22 Feb 2008 at 1:46 pm 1

    My problem is…I have a fluid blog layout, but my banner is fixed. I’ve put my banner in to fit all the way across the top of the screen as I see it on my computer. Does it look bad that way to you? It looks better this way to me than having it with a bunch of space on the side. Thanks for any feedback you may have!

  2. Michelle Laycockon 22 Feb 2008 at 2:39 pm 2

    Your banner looks fine Kimberley. You can place the image inside the header. This way you can give the image a WIDTH = 100% and it will stretch with the browser width. Typepad users will need to upgrade to Pro, I believe, if they want to use css to center their banner on a fluid template. To me, it isn’t worth the money.

Trackback URI | Comments RSS

Leave a Reply