Как сделать так, чтобы IE правильно отображал плавающий блок, если ширина указана в процентах?

Question

Пример кода:

.container { width:700px; margin:0 auto; background:red; color:orange; }
.container .wrapper { width:100%; background:green; }
.container .left { width:48%; padding-right:2%; background:black; float:left; }
.container .right { width:48%; padding-left:2%; background:blue; float:left; }
.container .left div, .container .right div { background: grey; }

<div class="container">
<div class="wrapper">
    <div class="left">
        <div>Left column</div>
    </div>
    <div class="right">
        <div>Right column</div>
    </div>
</div>

В IE левый и правый столбцы отображаются с шириной, меньшей указанного процента.

Как обойти этоошибка?