CSS Div 100% с float: left

Agrh, CSS - проклятие моей жизни. Может ли кто-нибудь здесь помочь?

Я пытаюсь получить следующий макет div:

*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************

В настоящее время мои стили выглядят так:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
}

#b {
float:left;
width:50px;
height:50px;
}

#c {
float:left;
width:100%;
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

Но из-за этого происходит следующее (div c опускается ниже других):

********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************

Что нужно изменить, чтобы это исправить? Спасибо.

Дополнительная информация:

• a и b должны иметь фиксированную ширину в пикселях.

• Это упрощенный пример - на самом деле у блоков div есть границы, которые не должны перекрываться.