variable-width spacer between fixed size pictures

[neuneudr]

Hi everybody,

I'm scratching my head with a CSS problem.

I want to have the following (the two pics have these size for
a good reason, the whole point of the page is basically to show
these pices at these fixed sizes) :

spacer - fixed size picture - spacer - fixed size picture - spacer

Height alignment doesn't matter, all I want is the "horizontal spacer"
to have a variable width.

And I'd like each of the three "spacer" to use one third of the
"remaining width". For example, if the first picture as a width of
350 pixel, the second a width of 250 and the viewable area a
width of 1002 pixels, I'd like to have each spacer taking :

(viewable area width - (350 + 250)) / 3

402 / 3 = 134 pixels

I can do it using a really ugly JavaScript hack (hence not only
ugly but also working only when the browser has JavaScript),
but I want to do it using CSS.

If I'm working only in %, I can do it easily, but here I'm forced
to deal with fixed-size picture and I'm lost.

I gave an example with 3 spacers / 2 fixed-size picture, but it
can be 4 spacers / 3 fixed-size pictures, etc.

Any hint is greatly appreciated,

Driss

[Ben C]

On 2006-12-07, ne******@yahoo.fr <ne******@yahoo.frwrote:

Hi everybody,

I'm scratching my head with a CSS problem.

I want to have the following (the two pics have these size for
a good reason, the whole point of the page is basically to show
these pices at these fixed sizes) :

spacer - fixed size picture - spacer - fixed size picture - spacer

Height alignment doesn't matter, all I want is the "horizontal spacer"
to have a variable width.

And I'd like each of the three "spacer" to use one third of the
"remaining width". For example, if the first picture as a width of
350 pixel, the second a width of 250 and the viewable area a
width of 1002 pixels, I'd like to have each spacer taking :

(viewable area width - (350 + 250)) / 3

402 / 3 = 134 pixels

I can do it using a really ugly JavaScript hack (hence not only
ugly but also working only when the browser has JavaScript),
but I want to do it using CSS.

This is a tricky one.

The only thing I can think of is to use a table. Give the whole
table a width (1002 pixels say), put each image in a cell on its own,
and between the image cells, put empty cells for the spacers. Set the
widths of the spacer cells to 1002.

Most UAs will make the spacers as wide as possible to get them as close
as they can to the 1002 you've asked for, but will give them all equal
width, and hence will divide up whatever width is left of the total
originally available (1002 pixels) after setting each of the cells with
an image in it to its minimum content width (which should be the width
of the image) equally between the spacers.

This is relying on behaviour that isn't specified anywhere official that
I can find though, although it works in Firefox, Opera and Konqueror.

[neuneudr]

Hi,

This is a tricky one.

ah damn :(

I hoped I was missing something obvious...

Thanks a lot for your answer