Колонки с плавающей точкой делают их одинаковыми по высоте (100%)

Итак, у нас есть 3 плавающих столбца.

Пример: http://jsfiddle.net/A9dqD/

html, body {height: 100%;}
#a {
    float: left;
    height: 100%;
    width: 50%;
    background-color: green;
}
#b {
    float: left;
    height: 100px;
    width: 50%;
    background-color: blue;
}
#c {
    float: left;
    height: 300px;
    width: 50%;
    background-color: red;
}

То, что я хотел бы достичь, - это столбец A как длинный (высота) как столбец C. (Таким образом, я могу сопоставлять фоны).

Как вы можете видеть, что я не могу сделать колонку дубля 100% ( по высоте) экрана. Тело получает 100% (высота) окна просмотра, но не всего документа, поэтому столбец a имеет такую же длинную высоту, как и область просмотра.

Вот пример реальной жизни: http://mac.idev.ge:800/wp1/

Я не хочу использовать jquery для установки высоты вручную. Я считаю, что есть простой трюк css, чтобы сделать это... и мне нужна ваша помощь, чтобы найти его :)

Благодарю!