Evenly spaced images

[Hopp Family]

Here's the problem. I want to display a known number of images, evenly
spaced out across the width of a div. (The images are not all the same
width; the centers should be evenly spaced.) The div changes width with the
browser, so the layout needs to be fluid. If the div narrows too much, the
images should wrap; in this event, the images on each row should be evenly
spaced (the spacing can vary from row to row).

I can't figure out how to do this. With tables, it's easy enough to do
everything for a single row, but not the wrapping. With css, I can get the
wrapping, but can't figure out how to space things evenly. I tried
text-align: justify, which does the job except for the last row of images.
Unfortunately, the default case is a single row. (I know about
text-align-last, but that's css3 and this needs to work in today's
browsers.)

Thanks,

Ted Hopp

[Spartanicus]

"Hopp Family" <ad****@erols.comwrote:

>Here's the problem. I want to display a known number of images, evenly
spaced out across the width of a div. (The images are not all the same
width; the centers should be evenly spaced.) The div changes width with the
browser, so the layout needs to be fluid. If the div narrows too much, the
images should wrap; in this event, the images on each row should be evenly
spaced (the spacing can vary from row to row).

Not possible.

Without the wrapping:
http://homepage.ntlworld.ie/spartani...ced_images.htm

--
Spartanicus

[zzpat]

Hopp Family wrote:

Here's the problem. I want to display a known number of images, evenly
spaced out across the width of a div. (The images are not all the same
width; the centers should be evenly spaced.) The div changes width with the
browser, so the layout needs to be fluid. If the div narrows too much, the
images should wrap; in this event, the images on each row should be evenly
spaced (the spacing can vary from row to row).

Since spacing between rows isn't a problem for you, try adding a
margin-right or margin left to the image.

img {
margin-right: 20px
}

[zzpat]

Hopp Family wrote:

Here's the problem. I want to display a known number of images, evenly
spaced out across the width of a div. (The images are not all the same
width; the centers should be evenly spaced.) The div changes width with the
browser, so the layout needs to be fluid. If the div narrows too much, the
images should wrap; in this event, the images on each row should be evenly
spaced (the spacing can vary from row to row).

Strike my previous response...I missed "evenly."

[zzpat]

Hopp Family wrote:

Here's the problem. I want to display a known number of images, evenly
spaced out across the width of a div. (The images are not all the same
width; the centers should be evenly spaced.) The div changes width with the
browser, so the layout needs to be fluid. If the div narrows too much, the
images should wrap; in this event, the images on each row should be evenly
spaced (the spacing can vary from row to row).

An easy solution may be to text-align: center; your container, then
place margins or padding on the images. It may not be exactly what
you're looking for but if you could give a little more info. it would
help a lot.

img {
margin-right: 20px;
}
..container {
text-align: center;
}

<div class="container">
<img style="width: 172px; height: 122px;" alt="butterfly"
src="images/butterfly2.png">
<img style="width: 172px; height: 122px;" alt="butterfly"
src="images/butterfly2.png">
</div>

[Hopp Family]

Unfortunately, this doesn't work when images are different widths. I'm sadly
beginning to believe that Spartanicus's answer ("Not possible.") is it.
*sigh*

Ted Hopp
"zzpat" <zz*******@gmail.comwrote in message
news:eq********@enews4.newsguy.com...

Hopp Family wrote:

>Here's the problem. I want to display a known number of images, evenly
spaced out across the width of a div. (The images are not all the same
width; the centers should be evenly spaced.) The div changes width with
the browser, so the layout needs to be fluid. If the div narrows too
much, the images should wrap; in this event, the images on each row
should be evenly spaced (the spacing can vary from row to row).

An easy solution may be to text-align: center; your container, then place
margins or padding on the images. It may not be exactly what you're
looking for but if you could give a little more info. it would help a lot.

img {
margin-right: 20px;
}
.container {
text-align: center;
}

<div class="container">
<img style="width: 172px; height: 122px;" alt="butterfly"
src="images/butterfly2.png">
<img style="width: 172px; height: 122px;" alt="butterfly"
src="images/butterfly2.png">
</div>