div de ancho relativo a las otras

[atoleon]

Hola

Necesito crear un una caja que contenga en su interior otras 3. De manera que la de la izquierda y la de la derecha tengan una medida fija, y la del medio rellene el espacio que dejen las dos de los lados.

Llevo ya mucho tiempo de intentos y búsquedas, pero mi poca experiencia en el tema no me deja avanzar. Mi última gran idea era la de ponerle un max-width, pero no funciona. en cuanto estrecho el ancho del navegador los divs se apilan uno sobre otro.

Espero puedan ayudarme. Gracias a todos y un saludo

[atoleon]

Mi último intento es algo que encontrado navegando aún más por la red. Donde lo encontré funciona perfectamente. Pero a mi no.

Código CSS:

.itemCarta {
    background: yellow;
    height: 100px;
}
.itemLeft {
    float:left;
    width:150px; 
    margin:0; 
    padding:0; 
    font-size:80%;
    background: green;
}
.itemRight {
    float:right; 
    width:150px; 
    margin:0; 
    padding:0; 
    font-size:80%; 
    background: blue;
}
.itemCenter {
    margin:0 150px;  
    font-size:80%;
    background: red;
}
 

Código HTML:

<div class="itemCarta">                     
  <div class="itemLeft">
    izquierda
  </div>
  <div class="itemCenter">
    centro
  </div>
  <div class="itemRight">
    derecha
  </div>
</div>
 

en mi caso, el div de la derecha siempre queda alineado a la derecha, pero por debajo de los demás, no a la misma altura.