CSS relativa + flotar

Question

Tengo 3 divs alinearon; el centro div tiene muchas imágenes de position:absolute (que se superponen: una imagen es visible a la vez; el resto es display:none; para jQuery cross-fading, que no es pertinente).

He cambiado el centro div para que sea position:relative para permitir que sus imágenes hijo sean position:absolute. Pero si configuro la izquierda, centro y derecha div en float:left, no aparece en el orden: izquierda, centro, derecha div (la izquierda y la derecha se agrupan a la izquierda).

Si saco position: relative en el centro div, funciona (pero las imágenes no pueden colocarse absolutamente dentro del elemento principal div, por supuesto).

¿Cómo coloco estos divs de manera que tenga izquierda, centro, derecha, mientras que las imágenes se pueden colocar absolutamente dentro del centro? ¿Debo establecer un pariente para los divs izquierdo y derecho también?

Answer 1

Puede hacerlo utilizando el siguiente CSS para cada columna. Tenga en cuenta que tanto # div-left como # div-right deben aparecer en el código HTML antes del # div-center, ya que de lo contrario no estarán en la misma posición superior.

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

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

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

Básicamente, los divs izquierdo y derecho flotan a cada lado, con un ancho fijo. Luego se le asigna al centro div un margen izquierdo y derecho que es igual al ancho de los divs que flotan en cada lado. Debido a que, gracias a los márgenes, el centro div se ajusta entre los flotadores, parece perfectamente alineado entre ellos.

El atributo position: relative no es necesario para el diseño (lo acabo de agregar porque necesita colocar otros objetos dentro de este div).

Si necesita que el diseño completo tenga un ancho fijo (por ejemplo, desea que la página ocupe un ancho de 980px), simplemente cree un div con este ancho e incluya los tres divs dentro de él.

Se puede ver el ejemplo en acción aquí: http://jsfiddle.net/7pBVX/

Answer 2

@jasie puede ser que nose dan el ancho de la center div por lo que dan la anchura del centro div comprobar esto http://jsfiddle.net/sandeep/ANvJe/