[SOLUCIONADO] Linear tres divs (izquierda-centro-derecha)

dar2 · #1 (**permalink**) 02/10/2011, 04:33

Hola a todos
Me registre hoy para ver si alguien podría ajudarme con mi problema de alineaciones de capas:
tengo puesto 3 divs alineados izquierda-derecha con float i el del centro con position:absolute ; left:35% ; margin:12px 0px 0px 0px;
Se ve bien alineados preo el problema que tengo es cuando reduzco la ventana de la web, la capa del medio se superpone.
Espero haberme explicado bien pra que ustedes lo entiendan y me puedan ayudar

Este es mi codigo:
HTML:

<body>
<div id="tablon-general">

<div id="tablon-derecho"> Esta es la capa de la derecha</div>

<div id="tablon-izquierdo"> Esta es la capa de la izquierda </div>

<div id="tablon-central"> Esta es la capa del centro</div>

</div>
</body>

CSS:

body {background-color:black ; }

#tablon-general {background-color:#B0B0B0;
height:195px;
}

#tablon-izquierdo { background-color:#CCCCCC;
height:167px ;
width:270px;
text-align:center;
float:left;
margin:12px 0px 0px 12px;
}

#tablon-central { text-align:center;
background-color:#CCCCCC;
height:167px;
width:335px;
position:absolute ;
left:35% ;
margin:12px 0px 0px 0px;
}

#tablon-derecho { background-color:#CCCCCC;
height:167px ;
width:218px;
text-align:center;
float:right;
margin:12px 12px 0px 0px;
}

C2am · #2 (**permalink**) 02/10/2011, 06:22

Hola
Quita el position: absolute del div no flotado.
Dejalo así, o cambialo por position:relative;

Saludos

PD: Bienvenido
PD2: utilizar el Highlight para el código.

ayukkonen · #3 (**permalink**) 02/10/2011, 10:10

Yo, siempre que trato de alinear tres capas lo hago de la siguiente forma:

Capa Izquierda: float: left;
Capa Centro: float: left;
Capa Derecha: float: right;

Y siempre funciona. Saludos y suerte.