I have three images that I would like to space evenly across a div so that the middle image is centered within the div and the left and right images are all the way over to their sides with a 0 margin.

I have a feeling this is a simple thing to do, but the best I could do was center all three images within the div. I just want them to spread out more.

Any suggestions?

Are you working with a fluid or a fixed design?

In a fixed design it's not that hard. You have a total width of the web page and a total width of the three images. The rest you can fill up with margins and padding and borders.

With a fluid design that might be different. You have to work with percentages and ems.

There is a good book to learn this: it's called "CSS Mastery".

I'm actually not sure what kind it is, but if I had to guess I would guess fixed.

I've been messing with the margins and paddings but it doesn't seem to be doing anything.

Foppa, the easiest way to space 3 images evenly across a width of web page, is with table. I recommend it to you, if you have only 3 images, it is the most adequate way. But if you have more images, css is the required solution. According to your posts, I concluded you are pretty familiar with: divs, css, paddings, margins, floating, etc., and you are lack of any idea or concept to solve this. One idea is to float left, left image, next to float right, right image and to put center image width left and right margins that overlaps other two images. Or another idea is to float left, images next to each other, toward left direction, of course evenly spaced. I hope it’s not complex. One of examples is web page web dizajn, look at web banners at the bottom of the page, just tweak the margins between them, and that's it.

the easiest way to space 3 images evenly across a width of web page, is with table

No, no, and NO! There is absolutely no need to resort to tables for this. Yes, learning CSS is a challenge, but you'll never learn it if you keep going back to tables!

CSS, at its current stage of development, is unpredictable and rough enough.

I don't want to even imagine how it was working with tables, spacer gifs, and...

... I imagined it too much. Now I feel sick.

I would recommend that you do NOT use tables to position your 3 images across the webpage. You should be able to position the 3 images with padding and margin using CSS.

I would make a duplicate page of the page that you want to use for your images and make that duplicate page your experimentation page. That way you won't be altering your original work.

Then I would start by postioning the 3 images where you want them to be horizontally on the page. Place one image on the left, one image on the right and one image in the center of the page. Then adjust the padding and/or margin for the left and right images until they are positioned where you want them.

Even though I wouldn't want to use tables, I can understand why some experienced people do not want to switch.

Tables work in all browsers, and CSS is full of bugs and logical contradictions. It's a typical early model-version.

You can't rely that a certain property says the same in all contexts.

It always changes what it means in every context.

If you spoken language would be logically so inconsistent as CSS, we'd be talking in poems.

CSS is truly not developed enough, and as soon as you stray off the beaten path, you enter unpredictable territory.

I currently am in a situation, where the usual tiling of the background to complete a column simply doesn't work, just because it concerns a nested div. Very frustrating.

This is a pretty simple thing to do with css.
You can see it working here.
http://geekspecialties.com/test/css-image.html

<style type="text/css">
<!--
#wrapper {
    background: #EEEEEE;
    padding: 20px;
    width: 95%;
}
#wrapper #photos {
    background: #E5E5E5;
    margin: 0px;
    padding: 0px;
    border: 1px solid #AEAEAE;
    min-width:540px;
    clear: both;
}
#wrapper #photos img {
    background: #FFFFFF;
    padding: 5px;
}
.rfloat {
    float: right;
}
.lfloat {
    float: left;
}
.center {
    margin: 0px auto;
}
img{
    display:block;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="photos">
<img class="rfloat" src="/test/images/imageX125a.png" alt="image a" title="image a floated right"/>
<img class="lfloat" src="/test/images/imageX125a.png" alt="image b" title="image b floated left"/>
<img class="center" src="/test/images/imageX125a.png" alt="image c" title="image c margin auto"/>

</div>
</div>

</body>
</html>

Thanks everyone! I got it looking right finally.

GS, your code doesn't work on IE7 (center image is moved to left)...

I don't know what you're seeing, It works fine in IE7.
http://dl-client.getdropbox.com/u/41218/css-image.jpg

I don't want to even imagine how it was working with tables, spacer gifs,

I can tell you, since I started there... it was ugly, infuriating, and kludgey - and it's STILL a kludge !

CSS is harder to master - no question about it, but it's SO much more flexible to work with. As with anything worth doing, it's worth taking the TIME to learn it.