1 reply [Last post]
Last seen: 12 years 3 weeks ago
Timezone: GMT-6
Joined: 2004-05-24
Posts: 22
Points: 4

I'm a big believer in establishing division widths using percentages instead of pixels, at least for fluid layouts, according to the numerous articles books, tutorials etc that I've read. Having said that, if I wanted to fill the header <div> here: http://www.charlottes-saddlery.com/about.htm
with an image or images that match the header <div> size (it's currently set at 100% width and 50 px high), do you have to convert the header to pixels instead of a percentage to do it?
If that is indeed the case, how does one still maintain the left and right <div's> to remain flush with the header <div>?
Many thanx for your consideration.

zendakk's picture
Heidelberg, Germany
Last seen: 18 years 1 week ago
Heidelberg, Germany
Timezone: GMT+1
Joined: 2003-11-27
Posts: 7
Points: 0

Header - % or PX?

As the header's div width will change with the width of the viewport (i.e. the browser window), your image will be cut off under certain circumstances. An image is obviously static so there's no way to make its width flow with your fluid layout.
A common way of dealing with this is to have the image not too wide so that it will still be visible even when the header div becomes narrower. Assuming that the header div won't become narrower than the content (in your case div#center), you can make the image as wide as the minimum width you would like the content to be. That way you're safe. For the remaining space in the header div you could apply a more abstract background image with an x-repeat so that it doesn't matter if it gets cut off.
I personally wouldn't break my fluid layout for the sake of an image. As you already guessed, if you give your header a fixed pixel width, the sidebar divs with percentage widths will not remain flush with it.

A few things I've noticed:
If you want your footer to appear beneath everything, having the same width as #top, and your #right div on the right above your footer, you should:

  • give #footer a clear: both; so that it keeps clear on its right side too and can thus stretch the whole width
  • rearrange your html so that div#right comes before div#center. That way it will float to the right of your main content and not below it
Your h5's are in uppercase in your markup and css. Seeing the rest is in lower case, it would be easy to change that too and thus keep it more uniform. Plus you could easily switch to an XHTML doctype that way. Anyway, just a thought.

Hope that helped a bit.