By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

Evenly spaced images

P: n/a
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
Share this Question
Share on Google+
5 Replies


P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.