Question

I have one ‘main’ div that that is wrapped around three child div’s. Each child div holds an image. My goal is for the three images to be evenly aligned across my page. The images are all the same size (200px by 166px). If there is some way to do this without the use of a dozen div’s that would be superb. To reiterate my question, I do NOT want all three images centered. I want the left img to be 30 pixels from the left of the page; the right img to be 30 pixels from the right of the page, and I want the center img to be perfectly centered between the two.

HTML:

    <div id="aboutimages">
        <div id="aboutimgleft">
            <img src="Stylesheets/images/manpc.jpg" alt="" />
        </div>
        <div id="aboutimgcenter">
            <img src="Stylesheets/images/coffee.jpg" alt="" />
        </div>
        <div id="aboutimgright">
            <img src="Stylesheets/images/keyboard.jpg" alt="" />
        </div>
    </div>

CSS:

#aboutimages{
text-align: center;
    width: 100%;
    margin: 0 auto;
    float:left;
    }

#aboutimgleft img{
    float:left;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:0px;
    width:250px;
} 

#aboutimgcenter {
    margin: 0 auto; 
    width: 70%;
}

#aboutimgcenter img{
    text-align:center;
    width:250px;
    height:166px;
    padding-bottom:20px;
    padding-top:20px;
}

#aboutimgright img{
    float:right;
    padding-bottom:20px;
    padding-top:20px;
    padding-right:0px;
    width:250px;
    height:166px;
} 

I am desperate for any type of help – this is frustrating the living hell out of me.

Thanks,

Evan

Answer 1

There are several ways to pull this off, here’s one way:

#aboutimages {
    position:relative; /* constrain absolutely positioned child elements */
}

#aboutimgleft {
    float:left; /* Float the first element */
    margin-left:30px; /* Here's that 30px you wanted */
} 

#aboutimgcenter {
    margin: 0 auto; /* Center the second element */
}
#aboutimgright {
    /* easier than float:right, but that could work too with some tweaking */
    position:absolute;
    top:0;
    right:30px; /* Here's that other 30px you wanted */
}

As long as the images are in those divs, they will be aligned.

Demo: http://jsfiddle.net/KPJP4/