IE плохо делит на 3 или нюанс верстки трех блоков в одну строку

Самый простой способ уложить любое количество блоков в строку, это использовать calc() для указания ширины и float: left.

Верстка

<div class="whole">

<h1>Заголовочек</h1>
<div class="blocks">

<div class="block one">
<figure>
<p>абзац</p>
<figcaption><p>подпись</p></figcaption>
</figure>
</div>
<div class="block two">
<figure>
<p>абзац</p>
<figcaption><p>подпись</p></figcaption>
</figure>
</div>
<div class="block three">
<figure>
<p>абзац</p>
<figcaption><p>подпись</p></figcaption>
</figure>
</div>

</div>

</div>

Стили

.whole { margin: 40px auto; padding: 0; width: 1100px; }
.blocks { height: 200px; width: 100%; }
.block { float: left; height: 200px; padding: 16px 0 0; width: calc(100% / 3); }
.one { background: green; }
.two { background: red; }
.three { background: blue; }
figure, figcaption { display: block; }

Результат в IE11

Пару дней назад я верстала макет очередного сайта на вордпресс™. Всё было хорошо, пока я не пошла проверить результат в IE. В IE9 и IE11 (скорее всего и в других версиях) третий блок из строки выползал на следующую строку и становился ровно под первым блоком при float:left, либо, если ему отдельно назначить float:right становился на следующей строке ровно под свободным пространством, где бы он должен был по идее находится.

Пришлось призадуматься. Оказывается, если в расчете ширины блока на 3 делить число, которое без остатка не делится (например, calc(1100px / 3)), то ширина-то блока рассчитается, а вот в одну строку они не лягут.

Декабрь 4, 2014