Foros del Web » Creando para Internet » CSS »

como puedo poner en la misma linea tres capas div...

Estas en el tema de como puedo poner en la misma linea tres capas div... en el foro de CSS en Foros del Web. Hola, lo que estoy intentado es poner tres capas div que encajen en la capa div contenedor, yo hice algo asin, pero solo me lo ...
  #1 (permalink)  
Antiguo 18/01/2012, 08:45
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 11 años
Puntos: 5
como puedo poner en la misma linea tres capas div...

Hola, lo que estoy intentado es poner tres capas div que encajen en la capa div contenedor, yo hice algo asin, pero solo me lo ajusta horizontalmente yo lo quiero tambien verticalmente, alguna ayuda, muestro el codigo saludos.
Código CSS:
Ver original
  1. <style type='text/css'>
  2.         .central{
  3.             background-color:blue;
  4.             width:60%;
  5.             margin:0px 0px 0px 20%;
  6.         }
  7.         .izquierdo{
  8.             background-color:red;
  9.             width:20%;
  10.             margin:0px 0px 0px 80%;
  11.         }
  12.         .derecho{
  13.             background-color:green;
  14.             width:20%;
  15.             margin:0px 0px 0px 0px;
  16.         }
  17.         .contenedor{
  18.             background-color:rgb(000,100,100);
  19.             width:80%;
  20.             margin:auto;
  21.         }
  22.     </style>
Código HTML:
Ver original
  1. <div class='contenedor'>
  2. <div class='central'><p>central</p></div>
  3. <div class='izquierdo'><p>izquierdo</p></div>
  4. <div class='derecho'><p>derecho</p></div>
  5. </div>
  #2 (permalink)  
Antiguo 18/01/2012, 08:55
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 12 años, 10 meses
Puntos: 269
Respuesta: como puedo poner en la misma linea tres capas div...

Para crear las columnas:
Código CSS:
Ver original
  1. .contenedor{
  2. overflow:hidden
  3. /* ... tus estilos ...*/
  4. }
  5.  
  6. .contenedor div{
  7. float:left;
  8. }
la regla es que la suma de los anchos totales (width +border + padding + margin) de todas las columnas no supere al width del contenedor. De lo contrario el contenido que no quepa se presentará en una nueva línea abajo descuadrándose tu maqueta.

Cita:
Iniciado por roboty Ver Mensaje
pero solo me lo ajusta horizontalmente yo lo quiero tambien verticalmente
No se bien a que te refieres pero podes googlear por "columnas de igual alto css", hay varias soluciones: una es dar un fondo con repeat-y al contenedor, otra es usar display:table ie8+, otra es igualar los height con javascript.

Saludos
  #3 (permalink)  
Antiguo 18/01/2012, 10:11
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 11 años
Puntos: 5
Respuesta: como puedo poner en la misma linea tres capas div...

Hola cristian_cena, no entendi muy bien tu respuesta, yo lo que intento es que las tres capas div con su parrafo incluido, queden en una misma linea dentro del div contenedor, le asigne un color de fondo para que se vea el ejemplo, no se si esto es posible, ya que le di un % del ancho para que me cabieran en una misma linea pero no estan alineados, esto es posible, saludos.
  #4 (permalink)  
Antiguo 18/01/2012, 10:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 12 años, 10 meses
Puntos: 269
Respuesta: como puedo poner en la misma linea tres capas div...

Si con "alinear" te refieres a crear columnas, (porque en tu ejemplo trabajas con margenes pero no estas creando columnas) con la respuesta anterior debes poder hacerlo, es decir usando float, siempre controlando los anchos de las columnas para que quepan en el contenedor.
Hace poco un compañero preguntaba sobre como alinear horizontal y verticalmente, te invito a leer el tema.
Si lo que intentas es igualar los altos de las columnas, hay muchísimas soluciones todas válidas.

Saludos.
  #5 (permalink)  
Antiguo 19/01/2012, 05:10
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 11 años
Puntos: 5
Respuesta: como puedo poner en la misma linea tres capas div...

Perdona no lo entendi, pero ahora si, me has resuelto mi problema, muchas gracias.

Etiquetas: capas, tres, fondo
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 12:15.