html - Full-height CSS layout, with multiple columns

Question

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  , in the right column the logo)

---

Here is what the layout looks like:

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

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

Answer 1

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.