Divs centrados en columnas

undetants · #1 (**permalink**) 28/04/2010, 09:03

Hola a todos,
no se que más probar...no logro que los 3 divs salgan centrados en tres columnas dentro del div "principal". He hecho todas las pruebas que he podido, con la propiedad float, con clear,....
Me podeis hechar una mano?

Gràcias!

<html>
<head>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF">
<div id="principal">
<div id="leftImg"></div>
<div id="centerImg"></div>
<div id="rightImg"></div>
</div>
</body>
</html>

Immelman · #2 (**permalink**) 28/04/2010, 10:17

Amigo, a leftImg, centerImg y rightImg, agrégale la propiedad:

display: table-cell;

A mi me funciona muy bien así. Si hay otra forma mejor que alguien lo pueda decir. Saludos.

comablck · #3 (**permalink**) 29/04/2010, 01:18

pues.. veo q le estas dando mucho margin-right a cada div, y pues tambien poneles un float:left; para q se corran a la izquierda, pero recorda q lo q abarcan los 3 divs mas el margen de separacion es el ancho q deveria tener el div principal o sea el q los contiene.

undetants · #4 (**permalink**) 29/04/2010, 03:02

Gracias por la respuesta pero no acaba de funcionar.

El problema es que no acabo de entender el funcionamiento de los bloques DIV en este ejemplo en concreto: Si pongo los 3 DIVs (leftImg, centerImg i rightImg) con posición relativa no entiendo que salgan uno debajo del otro. Yo tenia entendido que se posicionaban en relación al contenedor. Si, como es el caso, un contenedor (div principal) tiene 3 DIVS no anidados, cada div se debería posicionar con respecto a su contenedor. Añadiendo a este hecho que los divs por defecto tienen la propiedad display=inline (sin saltos de línea delante ni detrás) esto debería hacer que todos los divs de mi ejemplo estuvieran alineados, no uno debajo del otro.

Aun en el caso que mi explicación no fuera cierta (muy posible), la propiedad float=left o right aplicada a los 3 divs debería permitir otros elementos a su mismo nivel, no? Debo estar muy equivocado porque no funciona así. Hay alguien que pueda arrojar un poco de luz a este problema?

Gràcias.

undetants · #5 (**permalink**) 29/04/2010, 03:11

comablck, mi intención con el tema del margin-left i margin-right es dividir el div "principal" en 3 partes iguales: Para centrar un solo div, le das una margin left o right del 50% de su contenedor pero si quieres poner dos más, a uno le doy un margin-left del 33%(del contenedor)-10%(la mitad de su tamaño) y al otro le doy un 66%(del contenedor)+10%(la mitad de su tamaño). Vaya lio! Pero la posición la clava. Esto és lo mismo si le das un 76% a un div des del left y al otro des del right.

Espero que esto no influya.....

jomaruro · #6 (**permalink**) 29/04/2010, 06:02

Hola:

Investiga el código de este ejemplo del maestro kseso?

Saludos.

undetants · #7 (**permalink**) 30/04/2010, 01:58

Bueno muchas gracias por vuestras respuestas y ayuda. Finalmente creo que ya he encontrado el problema: Se trata de la propiedad "margin-left", que yo creia que al aplicarla a un div, hacia referencia a su contenedor, y no!

Mejor dejo el còdigo por aquí por si alguien lo necessita:

html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

#principal{
position: static;
width: 80%;
background-color: #788DA2;
height: 80%;
margin: 0 auto;
display: table;
}

#leftImg
{
position: relative;
height: 20%;
width: 20%;
margin-left: 3%;
margin-top: 20%;
border: thick dotted #EDC080;
float: left;
}

#centerImg
{
position: relative;
height: 80%;
width: 40%;
margin-left: 5%;
border: thick dotted #CCCCCC;
float: left;
}

#rightImg
{
position: relative;
height: 20%;
width: 20%;
margin-left: 5%;
margin-top: 20%;
border: thick dotted #800080;
float: left;
}