Home/ Questions/Q 79051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T21:05:06+00:00

I have a layout that is working, but it has one very annoying problem..

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 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.

    • 0