CSS relative + float

Question

I've got 3 divs lined up; the center div has many position:absolute images (which overlap -- one image is visible at a time; the rest are display:none; for jQuery cross-fading, which is not germane).

I changed the center div to be position:relative to enable its child images to be position:absolute. But if I set the left, center, and right div to float:left, it doesn't display in the order: left, center, right div (the left and right are bunched up on the left).

If I take out position: relative on the center div, it works (but the images can't be absolutely positioned within the parent div, of course).

How do I position these divs so that I have left, center, right, while the images can be absolutely positioned inside the center? Do I have to set relative for the left and right divs, too?

Answer 1

You could do it using the following CSS for each column. Take into account that both #div-left and #div-right must appear in the HTML before #div-center, as otherwise they won't be at the same top position.

 #div-left {
    float: left;
    width: 100px;
 }

 #div-center {
    margin: 0 100px;
    position: relative;
 }

 #div-right {
    float: right;
    width: 100px;
 }

Basically, the left and right divs are being floated to each side, with a fixed width. Then the center div is assigned a left and right margin that equals the widths of the divs floating at each side. Because, thanks to the margins, the center div fits between the floats, it appears perfectly aligned between them.

The position:relative attribute is not needed for the layout (I just added it because you need to position other objects inside this div).

If you need the full layout to have a fixed width (say, you want the page to occupy a width of 980px), just create a div with this width, and include the three divs inside it.

You can see the example in action here: http://jsfiddle.net/7pBVX/