my fancy header
Help me fix this layout!
The Problem
Scrollbars appear when they don't need to.
This is due to the 100% height / min-height style. I've tried many solutions; none have stuck.
Requirements
- Fixed width and centered content and sidebar
- Height of content and sidebar must be the same
- Height of content and sidebar must grow to accommodate more content
- Height of content and sidebar must not be shorter than window height
- Height of header must remain flexible, and not impact the CSS used to fix this issue.
- Content and sidebar background images contain gradients that must extend to fill 100% width
- Scrollbars only when needed.
- No Javascript to fix the problem (I realize that with jquery, it would be trivial to set the height, but there's gotta be a way in CSS!)
- Target Browsers: Firefox 3+, Safari 3+, bonus points for ie7+8 (separate stylesheet okay)
Delivery
Message @seaofclouds on twitter with a link to your fix
OR:Fork this repo on github, hack, restructure, and submit your patch!
Compensation
$100 via paypal
OR: if you're in San Francisco, I'll deliver you a pint and payment at the next github meetup.