how to evenly space a row of images using CSS

[Greg N.]

I'm new at CSS, so bear with me if this is a trivial or impossible thing
to do.

I have a few images that I want to place side by side, evenly spaced
across the page, such that the right image aligns with the right edge of
the browser window.


<----------- browser window width ---------------->
image1 image2 image3 image4


That means, as the window is resized, the spacing should adapt accordingly:


<--- browser window width --->
image1 image2 image3 image4


It's fairly easy to implement this with tables, but how about a pure
CSS implementation?

Thanks - Greg

 

[Spartanicus]

I have a few images that I want to place side by side, evenly spaced
across the page, such that the right image aligns with the right edge of
the browser window.

<----------- browser window width ---------------->
image1 image2 image3 image4

It's fairly easy to implement this with tables, but how about a pure
CSS implementation?

Not possible, with or without tables. The only way to achieve this is by
using text-align:justify, but that only works when the content wraps.

 

[Greg N.]

Not possible, with or without tables. The only way to achieve this is by
using text-align:justify, but that only works when the content wraps.

Sure possible with tables. Just align the image in the leftmost cell
left, the image in the rightmost cell right, center the other images in
their cells and give the cells appropriate widths in percent. Works like
a charm.

 

[Greg N.]

Sure possible with tables. Just align the image in the leftmost cell
left, the image in the rightmost cell right, center the other images in
their cells and give the cells appropriate widths in percent. Works like
a charm.

Example:

<table width=100%>
<tr>
<td width=17% align=left><img
src=http://www.icons.com/images/home2/token_GvB.gif>
<td width=33% align=center><img
src=http://www.icons.com/images/home2/token_heggem.gif>
<td width=33% align=center><img
src=http://www.icons.com/images/home2/token_grimandi.gif>
<td width=17% align=right><img
src=http://www.icons.com/images/home2/token_job.gif>
</table>

 

[Spartanicus]

Sure possible with tables. Just align the image in the leftmost cell
left, the image in the rightmost cell right, center the other images in
their cells and give the cells appropriate widths in percent. Works like
a charm.

Right you are, there is an alternative without using a html table, but
it's a bit messy: http://homepage.ntlworld.com/spartanicus/justify.htm

It's buggy in IE due to what appears to be rounding errors in adding the
widths of the individual elements, maybe there's a hack to solve that.

Another possible method could be to float four 25% width containers.

Note that these methods do not allow the images to wrap if the window
width isn't wide enough, thus you are better off choosing a different
layout.

 

[dorayme]

Example:

<table width=100%>
<tr>
<td width=17% align=left><img
src=*>
<td width=33% align=center><img
src=*>
<td width=33% align=center><img
src=*>
<td width=17% align=right><img
src=*>
</table>

This *nearly* satisfies you wanting "to place side by side, evenly spaced
across the page, such that the right image aligns with the right edge of
the browser window" but it is not strictly even between each pic. In a 900px
wide table the lengths would go 40,110,130,40,130,130,40,130,110,40 where 40
are your pics and the rest the distances from edges of same.

("evenness" might be had or simulated by changing the balance of percentages
of the cells.)

I have so often ended up using tables for similar requirements. But am
interested in your question.

dorayme

 

[Greg N.]

http://homepage.ntlworld.com/spartanicus/justify.htm

I'd say that's exactly what I was after. Thanks.

 

[Greg N.]

I'd say that's exactly what I was after. Thanks.

Hmm... this is CSS2 stuff, isn't it?

 

[Spartanicus]

Hmm... this is CSS2 stuff, isn't it?

A mix of css 2.0 (table values) and 2.1 (inline-block value).

The table values are used by proper browsers (Opera, Gecko and KHTML
browsers), IE5.5+ uses the inline-block value.