469,645 Members | 1,742 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

variable-width spacer between fixed size pictures

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

Dec 7 '06 #1
2 3832
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.
Dec 7 '06 #2
Hi,
This is a tricky one.
ah damn :(

I hoped I was missing something obvious...

Thanks a lot for your answer

Dec 7 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Frederik Sørensen | last post: by
134 posts views Thread by James A. Donald | last post: by
23 posts views Thread by Russ Chinoy | last post: by
3 posts views Thread by rls03 | last post: by
pbmods
1 post views Thread by pbmods | last post: by
2 posts views Thread by Florian Loitsch | last post: by
37 posts views Thread by minkoo.seo | last post: by
112 posts views Thread by istillshine | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.