View Single Post
  #3 (permalink)  
Old 06-11-07, 03:32 PM
TwoD TwoD is offline
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
I think I'd arrange it so that you have something like:
  • Wrapper - Centers the page.
    • Header - Holds the upper part of the page, upper-rounded corners as bg.
      • Header content - Holds whatever you want to place in here
      • Clearing div (if you floated what's in the header) - Has the lower rounded corners as bg. Might also set margins to the "main content" of the page.
    • Content - Sets the background color you want for the Sidebars.
      • Left sidebar - floated left etc.
      • Page - floated left, has the background color you want for the page etc.
      • Right sidebar - floated left etc.
      • Invisible clearing div - Makes sure the Content div stretches all the way down.
    • Footer - Clearing div, makes sure the Wrapper stretches all the way down.
      • Bottom image

Of course, things are missing here. You might need to add more layers of divs to get the border effect etc, unless that's possible to do with the actual border settings, but that might mess up the rounded-corner images.
Note that the actual sidebar divs won't stretch all the way down. That's not possible unless you fill them with whitespaces (or other content) or set a fixed height. Netither is very flexible. There's also the huge-margin-hacks used in One True Layout, but I don't like that approach myself.
You'll just make it look like they stretch all the way since the Content div is the one setting their background color.

There's one thing to note tho. If the Page div becomes smaller than the sidebars, You'll get the sidebar-background below that div. To fix that, you could use the min-height property.
It doesn't work good in all browsers, but here's a useful trick which won't break anything.
CSS Code:
  1. height: 400px;
  2. height: auto !important;
  3. min-height: 400px;

I used that a lot on www.sofe.se to get the columns to never go below a certain height. It's not as noticeable now tho as they've added more content. But before that, you could get odd things like correct background color (the div stretched far enough) but the border around it only stretched as far as the content reached.
Anyway, I'm sure I missed some important stuff since I typed this out a bit too fast, but I hope it was atleast a bit useful
__________________
[W3Schools - learn all about the standards.] [QuirksMode - Browser Quirks] [MS's Online Reference Docs] [DOM in Gecko.]
Please pay attention to stickys, announcements and forum rules, thank you.
Please also remember Code Wrappers and [SOLVED] Marking, this helps everyone.
Reply With Quote