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/