Foros del Web » Creando para Internet » CSS »

Tamaño proporcionado 3 divs

Estas en el tema de Tamaño proporcionado 3 divs en el foro de CSS en Foros del Web. Hola, tengo una cabecera formada por 3 divs: DIV A | DIV B | DIV C estoy intentando que el "div a" y el "div ...
  #1 (permalink)  
Antiguo 02/08/2010, 03:37
 
Fecha de Ingreso: abril-2009
Ubicación: Zaragoza
Mensajes: 50
Antigüedad: 8 años, 7 meses
Puntos: 1
Tamaño proporcionado 3 divs

Hola, tengo una cabecera formada por 3 divs:

DIV A | DIV B | DIV C

estoy intentando que el "div a" y el "div c" esten siempre a la izquierda y derecha sea cual sea la resolución del usuario, pero no consigo que el "div b" (el de enmedio) crezca segun necesidad manteniendose siempre centrado.

Bueno, esta claro que sería lo mismo que hacer una tabla con 3 columnas, ponerle un fijo a la primera y a la ultima y la de enmedio crezca segun el width de la tabla, pero no consigo saber como.

¿Alguna idea?

Gracias otra vez a forosdelweb, pedazo comunidad
  #2 (permalink)  
Antiguo 02/08/2010, 03:43
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Tamaño proporcionado 3 divs

Hola gatopanah, prueba con esto:

Código:
#divA, #divB, #divC {
    float: left;
}

#divA, #divC {
    width: 20%;
}

#divB {
    margin: 0 auto; /* width: 60% */
}
Si divB no se ajusta al 60% prueba con width: 60;
  #3 (permalink)  
Antiguo 02/08/2010, 04:35
 
Fecha de Ingreso: abril-2009
Ubicación: Zaragoza
Mensajes: 50
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Tamaño proporcionado 3 divs

Y si quiero que "DivA" y "DivC" tengan un ancho específico en pixeles? es posible que "DivB" sea extensible dinámicamente?.

Gracias por la respuesta.
  #4 (permalink)  
Antiguo 02/08/2010, 09:43
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Tamaño proporcionado 3 divs

He probado el código de TotemmetoT y aunque si que tiene ancho fijo en los divs laterales, el central no los respeta y cambia de linea. He hecho unas pruebecillas y yo lo solucioné agregando un div más que contuviese al divB. El margen que le he dado ha sido el mismo que el tamaño de los divs laterales. Les he puesto color para verlo más claramente pero es un código muy sencillo, pruébalo y nos cuentas. Te paso el código:

Código:
Código CSS 

#divA, #divB, #divC {
    float: left;
    height: 200px;
}
#divA, #divC {
    width: 200px;
    background-color: #f9f;
}
#divB {
    margin: 0 auto; 
    background-color: #9cf;
}
#divD {
	margin: 0 200px;
}

(X)HTML

<div id="divA"></div>
<div id="divD">
  <div id="divB">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci ipsum, facilisis ac bibendum nec, dictum eleifend lectus. Nunc congue nibh id enim mattis quis mollis massa hendrerit. Suspendisse vel pretium lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam lacinia tristique malesuada. Mauris orci ligula, fringilla vel tempus in, volutpat ac urna. </p>
  </div>
</div>
<div id="divC"></div>
  #5 (permalink)  
Antiguo 02/08/2010, 14:20
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: Tamaño proporcionado 3 divs

Hola:

Prueba este código:

Código CSS:
Ver original
  1. #cabecera {width: 100%;height: 100px;}
  2. #derecha, #izquierda, #centro {height: 100%;}
  3. #derecha {float: right; width: 200px;background-color: #f00;}
  4. #izquierda {float: left; width: 200px;background-color: #0f0;}
  5. #centro {background-color: #00f;}

Código HTML:
Ver original
  1. <div id="cabecera">
  2. <div id="derecha"></div>
  3. <div id="izquierda"></div>
  4. <div id="centro"></div>
  5. </div>

Lógicamente tendrás que adaptarlo a las medidas que necesites, pero funciona.

Saludos.

  #6 (permalink)  
Antiguo 02/08/2010, 15:04
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
De acuerdo Respuesta: Tamaño proporcionado 3 divs

Interesante, yo no era capaz a tener siempre el central aunque no tuviese contenido, creo que me voy a apuntar eta estructura...
  #7 (permalink)  
Antiguo 03/08/2010, 02:10
 
Fecha de Ingreso: abril-2009
Ubicación: Zaragoza
Mensajes: 50
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Tamaño proporcionado 3 divs

pann84 estoy contigo, lo de jomaruro es de matrícula.

Como siempre gracias!!
  #8 (permalink)  
Antiguo 23/08/2010, 03:50
 
Fecha de Ingreso: abril-2009
Ubicación: Zaragoza
Mensajes: 50
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Tamaño proporcionado 3 divs

Genial, gracias a todos ¡¡ Funciona !!

Etiquetas: tamaño
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 01:32.