Hi all,

when I used to use tables for positioning, and wanted two images with captions to be 'equally' centred horizontally with a gap between them, I would make a one-row two-column table and center each of the two photos with their captions inside, one centered in one cell and the other centred in the neighboring cell.

Could you tell me please how to achieve this with CSS? I am using a fixed-width layout. I have a div containing my image and caption, and would like to have two of them spaced equally left-to-right, like I had with tables.

Here are my declarations for my divs containing image and caption, where only one image alone is centered on the page in my fixed-width layout:

/* start */
div.imagecaptioncenter {
background-color:#FFCC99; margin: 5px auto 10px auto; display:block; padding:5px; border:1px solid black;
}
div.imagecaptioncenter img {
border: 1px solid gray;
}
/* text for that caption */
div.imagecaptioncenter p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptioncenter p.source {
margin-top:-0.2em;
font-size: 0.9em;
color: #778899;
}
/* end */

Thank you for any help!

Dave