Stretchy images with CSS layout

Giganews Newsgroups
Subject: Stretchy images with CSS layout
Posted by:  Chris Davies (chris-usen…@roaima.co.uk)
Date: Sat, 19 Sep 2009

This is doing my head in. I'm trying to get my head around CSS, and
I reckon I'm doing fairly well so far. I have the following layout
successfully built as a prototype, using a table layout structure, but I
understand that I should really be considering CSS based layouts. (Content
vs presentation, and all that.)

Variations of this type of problem appear to be FAQs (with answers),
but I can't find anything that helps me solve this particular thorn.

So. Consider a fluid layout.

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

Now for the vertical furniture. Starting with the logo in the top
left hand corner, below that I want a panel that will contain context
sensitive shortcuts. Below that I would like a image that will stretch
into the remainder of the vertical space until it's level with the end
of the main content. This stretchy image should be a known fixed width.

In case it's not obvious, the per-page content will go into the available
remainder of the space.

Oh. Neither of the stretchy images can be handled with a repeating image;
if you like you can imagine it as a gradual fade between the prinicpal
colour associated with the fixed images and their complementary, along
with some swirly stuff to break the boredom.

I hate to post here, but despite a fairly big effort (several hours
digging through tutorials, FAQs, etc.), I cannot find anything that
actually satisfies my requirement. Clues, pointers, and solutions all
gratefully received.

Cheers,
Chris

Replies