Tamaño proporcionado 3 divs

[gatopanah]

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

[TotemmetoT]

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;

[gatopanah]

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.

[pann84]

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>

[jomaruro]

Hola:

Prueba este código:

Código CSS:

#cabecera {width: 100%;height: 100px;}
#derecha, #izquierda, #centro {height: 100%;}
#derecha {float: right; width: 200px;background-color: #f00;}
#izquierda {float: left; width: 200px;background-color: #0f0;}
#centro {background-color: #00f;}
 

Código HTML:

<div id="cabecera">
<div id="derecha"></div>
<div id="izquierda"></div>
<div id="centro"></div>
</div>
 

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

Saludos.

[pann84]

Interesante, yo no era capaz a tener siempre el central aunque no tuviese contenido, creo que me voy a apuntar eta estructura...

[gatopanah]

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

Como siempre gracias!!

[gatopanah]

Genial, gracias a todos ¡¡ Funciona !!