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?