From: jameswoody on
When I apply a rule for all images in the div tag, the images all sit on top of
one another;

.container img {
position: absolute;
bottom: 0px;
}

If I set the images individually I can stop them from doing this;

.container #image1 {
position: absolute;
bottom: 0px;
left: 320px;

The problem however is that this design is for a template. The images in the
template will double in size when the user is on that page.

If i use a pixel (or a %) value for the left position, then the left hand side
of the image is centered, not the centre of the image. This means that the
space between the images will vary when one of them enlarges.

This could be solved if there was some way of making the images sit next to
each other, without specifying a position left value (like when you insert
images into a div tag with no rules).

Can this be done?


Alternatively, is there a way of using a position left value which controlled
the position via the center of the image, not the left side? Then I could use %
values and the images would still look ordered.