Foros del Web » Creando para Internet » CSS »

Divs centrados en columnas

Estas en el tema de Divs centrados en columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/04/2010, 10:03
 
Fecha de Ingreso: abril-2010
Mensajes: 4
Antigüedad: 7 años, 7 meses
Puntos: 0
Divs centrados en columnas

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">
<!--
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

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

#leftImg
{
position: relative;
height: 20%;
width: 20%;
margin: 0 auto;
margin-right: 76%;
border: thick dotted #EDC080;
float: right;
}

#centerImg
{
position: relative;
height: 80%;
width: 40%;
margin: 0 auto;
border: thick dotted #CCCCCC;
}

#rightImg
{
position: relative;
height: 20%;
width: 20%;
margin: 0 auto;
margin-left: 76%;
border: thick dotted #800080;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="principal">
<div id="leftImg"></div>
<div id="centerImg"></div>
<div id="rightImg"></div>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 28/04/2010, 11:17
 
Fecha de Ingreso: abril-2005
Mensajes: 38
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Divs centrados en columnas

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.
  #3 (permalink)  
Antiguo 29/04/2010, 02:18
 
Fecha de Ingreso: abril-2010
Mensajes: 122
Antigüedad: 7 años, 8 meses
Puntos: 18
Respuesta: Divs centrados en columnas

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.
  #4 (permalink)  
Antiguo 29/04/2010, 04:02
 
Fecha de Ingreso: abril-2010
Mensajes: 4
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Divs centrados en columnas

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.
  #5 (permalink)  
Antiguo 29/04/2010, 04:11
 
Fecha de Ingreso: abril-2010
Mensajes: 4
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Divs centrados en columnas

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.....
  #6 (permalink)  
Antiguo 29/04/2010, 07:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Divs centrados en columnas

Hola:

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

Saludos.

  #7 (permalink)  
Antiguo 30/04/2010, 02:58
 
Fecha de Ingreso: abril-2010
Mensajes: 4
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Divs centrados en columnas

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;
}

Etiquetas: columnas, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:23.