Html – Full-height CSS layout, with multiple columns

css, html, layout

I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.

This is the desired layout in bad-ASCII-art format:

_____________________  _|    | long    |logo|   ||    | content |    |   ||    |         |    |   ||    |         |    |   ||grad|         |grad|   | Viewport|    |         |    |   ||    |         |    |   ||    |         |    |  _||    |         |    ||    |         |    |_____________________|2em| <-20em->| 2em|

..or with short content..

_____________________  _|    | short   |logo|   ||    | content |    |   ||    |         |    |   ||    |         |    |   ||grad|         |grad|   | Viewport|    |         |    |   ||    |         |    |   ||    |         |    |   ||    |         |    |   |_____________________  _|

Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.

I have tried using the CSS min-height hack, which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single &nbsp;, in the right column the logo)


Here is what the layout looks like:

Layout

And the problem (when the browser window is shrunk vertically):

Problem

Finally, the problem HTML/CSS, http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/

Best Solution

Given that you have your gradients in seperate columns to the left and right, you need to implement "faux columns".

If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.