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

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.