div de ancho relativo a las otras

[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.