PDA

View Full Version : How to evenly distribute images horizontally in a container


fasttempo123
08-08-2006, 03:20 PM
I have 5 small images to be used as links that I'd like to distribute them evenly in a div container so that the space between those images will vary depending on the screen resolution and size. But the images themselves shouldn't overlap even when the window size is reduced to minimum. All images have the same height but different width. The total width is less than 400px. All has to be in CSS.

Thanks in advance.

chriskq
08-10-2006, 03:39 AM
give them all
margin: 0 auto;
text-align: center;


although there will be no padding in between each image as you sed u dont want blank space when the browser window is resized.

besides u just sed your giving the container a fixed width. So when the browser gets resized it wont resize ur container and therefor the images inside it.

pls correct me someone if im wrong.

fasttempo123
08-10-2006, 05:08 AM
give them all
margin: 0 auto;
text-align: center;


although there will be no padding in between each image as you sed u dont want blank space when the browser window is resized.

besides u just sed your giving the container a fixed width. So when the browser gets resized it wont resize ur container and therefor the images inside it.

pls correct me someone if im wrong.

I am now back to table cos css just doesn't do this type of job properly. Even if I manage to use margin to get it right for a particular browser window size, as soon as the window size is reduced the far right images will start to drop below the line. This is useless for horizontal links.

chriskq
08-15-2006, 07:43 AM
well yea then use a table for that area of content ur trying to make.
give the table a width and align it center, but dont give each td cell a width, so that when browser window is resized each td cell will re-size accordingly

domedia
08-15-2006, 05:49 PM
Just set a percentage margin to each image, should do the trick.