Fixed Width or Fluid Width?

[Cynthia]

[LaneLester]

[Lynn Terry]

[bs28723]

I just redid my site (listed below) using fluid design, all divs and css, very minimal tables.

Even if you do most of your work in tables you can still make the header fluid very easily. But the trick is that you need a header that has at least one edge that has a repeatable pattern or a solid color.

If you look at my header - mouse over the water and do a right mouse click and then "view background image" in firefox, or "save background" if you use IE (you will need to view the image from wherever you save the file).

The image has water flush up to the right edge. This edge is very hard to stretch or make fluid. However, the left edge is a repeatable pattern. So, I edit the header in something like photoshop. I then use the crop tool and crop off just the left edge for about 15-20 pixels wide, full height. Save this little slice to a new file called hdr-bg.jpg.

Now, what I would do is use the hdr-bg.jpg as the background for the table. I would then setup the background to repeat-x. This covers the table cell for as wide as the cell goes.

Now, since my image has a unique right side and the background only matches the left side, I am going to put the image in the cell but right align the image. This pins it to the right, and make the left side fluid.

What if your image is the same on both sides, or has the same color on both sides? You can set the background color of the cell to match the background of the image. Then just center the image.

The same concepts work for your content and menu columns.

But I suggest you start with the header and understand the concepts, then you can work on the content part of your pages.

If folks are interested, I might have a link to a website that explains this with pictures, that I can't really do well here.

Good Luck.

[theuniek1]

Hey Cynthia,
Fixed or fluid? Depends on mood, design, and content.

Mood - sometimes I'm just not in the mood to fiddle with a fluid width design because there are many variables to consider.

Design - some designs lend themselves more to fluid layouts than others.

Content - since fluid designs stretch to meet the current browser's constraints, the content will stretch, too. If you don't have enough content to fill the space, it could throw the design off and just look unprofessional.

Hope that helps.

~ Teli

[Cynthia]

[SteveJohnson]

One of the biggest advantages that fixed-width designs have is that you can control the width of a text column. As Teli said, if you don't have enough content to fill the space alloted, it could end up looking funny.

More importantly, wide widths make online reading (offline reading, too) difficult. The longer the line-length, the more difficult it is for the readers eye to move from the end of one line to the beginning of the next without interruption.

[Cynthia]

I have experience with both fixed width and fluid but have never used Wordpress so I'm not sure if WP makes it any easier or more difficult to use one or the other. That's why I asked in regard to a blog specifically - though I didn't mention WP in my question specifically, and I should have.

That's a good point you make about the line length Steve. Thanks for pointing that out.

[bs28723]

Cynthia,

This will vary by theme. Because WP embeds the HTML in the PHP scripts, this is not easy to find. The default theme appears to be fixed.

Steve and Teli make great points about width and content. But if you really get into this, you can set max and min widths for your page, so that things look the way you want.

Personally, I think a little flexability in the width of page is a good thing for something like a blog page. You don't know what screen size people have, nor the font size. So, giving them a little flexibility to fill up the screen and minimize the scrolling is a good thing.

Good Luck.

[SteveJohnson]