469,344 Members | 5,990 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Evenly spaced images

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
Feb 12 '07 #1
5 11709
"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
Feb 12 '07 #2
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
}

Feb 12 '07 #3
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."
Feb 12 '07 #4
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>

Feb 12 '07 #5
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>

Feb 12 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Michal Mikolajczyk | last post: by
6 posts views Thread by kjm | last post: by
5 posts views Thread by alan b | last post: by
2 posts views Thread by webmaker | last post: by
6 posts views Thread by VB Programmer | last post: by
15 posts views Thread by Alan Silver | last post: by
reply views Thread by PromisedOyster | last post: by
2 posts views Thread by Terry | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.