CSS: Fixed or Float Layout?

Question

My question revolves around CSS Fixed Layout vs a Float Layout that extends to fill the width of the browser.

Right now the issue I'm running into is to have the masthead resize depending on the width of the page (something that I understand isn't possible given current browser implementation of CSS3's background-image: size;). At this point, I feel like I've reached an impasse all around: Do I rework the site to use a fixed CSS layout, or do I keep the current layout and try to make the masthead image expand to fill most of the space provided? Moreover, what are the pros and cons of moving to a fixed width layout, and the other (unseen) ramifications of using one layout over another?

The site in question will be given as a comment to this question -- I don't want to be seen as trying to increase traffic to it.

Edit: Any other thoughts?

Answer 1

If you are trying to expand your background-image to the width of your page, it is better to use a fixed-sized layout as there is no cross-browser method to making a background-image expand to varying sizes that are dependent on the visitors resolution.

Fixed width layouts provide more flexibility for the designer, but not for the visitor. If you create a layout that is X pixels wide, then you are able to fine-tune your website pixel-by-pixel to your liking whereas "float" layouts (I call them liquid layouts) are based entirely on percent values and therefore differ from computer-to-computer. I find this difficult because you can test the layout on your screen and not know how it appears on someone else's, and (for ex.) a 20px margin has more of an effect on a 768px or 960px fixed-width layout than it does on a 1280px-liquid computer screen.

The major con, IMO, to a fixed-width layout is the fact that it looks too small on larger screens and too big on smaller screens. 768px used to be a fairly standard fixed-width layout, but now that is too small as the world moves away from 800x600. Now 960px is fairly standard, which is too big for 800x600 but still too small on 1280x1024.

It all depends on your audience and how your site fits together. Some layout can be made liquid and work perfectly fine, while others must be fixed (like the one you described).

Answer 2

Why not use an <img> tag for your header image (masthead) instead of using a background image?

I would suggest not scaling your header graphic; most browsers are terrible at image scaling (nearest neighbor what?) and it won't look good for many people.

I'm for fluid/float/liquid layouts myself. I fact, most of my sites use a single column, so I don't have to worry about all the complexities "normal" site layouts have.

Answer 3

What kind of image is it? Is any part of it repeatable? Sometimes using two layers, one or the tag for a repeating element of the image and another for the fixed element.

Can we see an example? It would be easier to get to the right answer for your problem.

Answer 4

What about revealing more or less of the image as the browser is resized, rather than scaling the image? It's not quite the same effect, but it's an easy way to fill an entire space with an image.

Let's assume, for the sake of the example, that your masthead's background image contains a logo of some sort on top of, say, a photograph of a city skyline. This is, overall, 1600px wide. The logo sits to the left of the image while the cityscape extends far right. And we'll assume your markup looks roughly like this:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

We can set the #page element to an elastic width and apply a background image to the #masthead element:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

What happens here is that the #masthead element will expand to the width of the #page element, which will be somewhere between 800px and 1600px wide (inclusive) depending on how wide the browser window is. When the #page element is 800px wide, you see only the left-most 800px of the skyline; when it's 1600px wide, you see the entire skyline. That way your logo is always visible and when the browser is resized, more of the cityscape is revealed.

This does require having a larger image to start with (at least as wide as your max-width, if you go elastic), but the result is a masthead that will look good no matter what size it is--without relying on, as strager mentioned, browsers' image resizing algorithms.

Answer 5

It is generally a bad idea to create a layout where text-columns expand to the browser with. Text becomes hard to read if the lines grow to long. I recommend settling on a fixed with for the text-column, perhaps around 50 letters wide.