Contenedor con 3 divs, los laterales fijos y el central con width 100%

[tempto]

Buenas,

Tengo un div contenedor con 3 div's más o menos así:

-------------------------------------
|
------|--------------------|------ |
------|--------------------|------ |
|
-------------------------------------

Los div's laterales tienen un tamaño fijo con una imagen de fondo y la idea es que el div central, que también tiene una imagen de fondo, esté al 100%, para que ocupe la totalidad del div contenedor, que también está al 100%, pero sin pisar ni desplazar los div's laterales.

Este es mi código:

Código:

.top
{
    width:100%;
    height:20px;
}

.top_left
{
    float:left;
    width:20px;
    height:20px;
    background:transparent url('/Imagenes/top_left.png') no-repeat;
}

.top_cen
{
    float:left;
    width:500px;
    height:20px;
    background:transparent url('/Imagenes/top_cen.png') repeat-x;
}

.top_right
{
    float:left;
    width:20px;
    height:20px;
    background:transparent url('/Imagenes/top_right.png') no-repeat;
}

Código HTML:

<div class="top">
    <div class="top_left"></div>
    <div class="top_cen"></div>
    <div class="top_right"></div>
</div> 

Necesito conseguir que el width de la clase top_cen sea 100%, pero si lo pongo así, me desplaza los div's laterales :S
Alguna idea?

[javierflti]

Se me ocurre poner los 3 con porcentajes.
Por ejemplo un 15% cada lateral y un 70% el central.

[Tedel]

No, hay otra forma. Por $495 dólares te la enseño...

Bueno, hablando en serio, lo que se hace es darle un tamaño específico a izquierda y derecha y establecer la posición, no el tamaño, de la central. Eso resolverá tu problema.

Por ejemplo, si el sidebar mide 300 de ancho, dile al navegador que el div central comienza en el punto 320. La computadora calcula lo demás.

#right
{width: 300px}

#center
{left: 0; right: 320px}

Prueba si funciona.

[C2am]

Usando float, lo que debes hacer es flotar los laterales, no flotar el centro, si quieres puedes definir el ancho del centro (aunque no hace falta) y luego en el html ponerlos en este orden:
izquierdo
derecho
centro

o
derecho
izquierdo
centro

Un ejemplo

La idea es:
1º posicionas el izquierdo (o derecho) que tiene un ancho fijo menor al 100% del contenedor
2º posicionas el derecho (o izquierdo) que tiene también un ancho fijo ....
3º entonces el contenido de centro se ubicara en el espacio que quede libre entre ambos laterales.

A tener en cuenta, es que si no defines la altura verás que el centro, si es más alto que los laterales, el contenido del mismo se podría poner debajo de estos laterales.
Tal como puedes apreciar en la segunda opción del ejemplo.
Además que deberas usar algún artilugio para que las columnas queden con la misma altura (columnas equilibradas). Claro, si tienes una altura ya definida esto último no tiene sentido.

Saludos