Question

I know there must be a simple way to do this but for the life of me I can’t figure it out.

I have a three column layout with a fluid center column and what I need to do is to take 3 images and distribute them evenly across the center div – such that the center image is always in the center of the center column (i.e. the center of the page) and the left image is justified left and the right image justified right.

the page uses a stripped down version of the faux absolute positioning demo as a framework, and there is no problem implementing that – but what I need is a self-contained way to arrange these three objects within the center div (column).

I have tried putting them in an Unorded List but when I float the elements to the left – well then they are floated to the left and no longer centered in the div.

I also tried doing it without the ul but have so far been unsuccessful.

any help here would be appreciated.

Answer 1

Let’s say this is your markup:

<div class="wrapper">
    <img class="first">
    <img class="second">
    <img class="third">
</div>

There are many ways to accomplish this, here is one way using known widths of the images:

img {
    width:100px;
    display:block;
}
.first {
    float:left;  
}
.second {
    float:right;
}
.third {
    margin:0 auto;
}

Demo: http://jsfiddle.net/wY6AS/

Here’s another way with absolute positioning, and known widths:

.wrapper {
    padding:10px;
    position:relative;
}

img {
    width:100px;
    height:100px;   
    display:block;
}
.first {
    position:absolute;
    top:10px;
    left:10px;
}
.third{
    position:absolute;
    top:10px;
    right:10px;
}
.second {
    margin:0 auto;
}

Demo: http://jsfiddle.net/wY6AS/1/

I wish I could make more demos and give better explanations, but I’ve got to run. Known widths makes it easy, but it is still not all that difficult with unknown widths, using display:inline-block and text-align:center on the parent element in combination with floats or absolute positioning, for example.

I don’t want to suggest tables, but that’s an option too if you are really desperate and can’t get another method to work. Check out the CSS display properties that emulate table behavior as well.