Володя Токмаков уже два раза освещал способы борьбы с этой напастью (способ 1, способ 2), я добавил третий.
Вкратце, в чем заключается проблема: IE округляет дробные пиксельные значения, полученные из процентов, до наибольшего целого. То есть если у вас будет блок шириной в 101 пиксель, а внутри него будет два блока шириной в 50%, то ширина каждого блока будет 51 пиксель (101 / 2 = 50,5; округляем до наибольшего целого и получаем 51). Что естественно, в сумме больше, чем 101. В итоге последний блок переносится. Этот способ демонстрирует, как этого можно избежать.
Особый кайф от статей в техногрете в том, что его читает много людей, а некоторые даже делятся своими решениями. В частности, Сергей Комаров прислал вот такое замечательное решение:
<style type="text/css">
ul, ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
width: 100%;
overflow:hidden;
}
ul li {
float: left;
clear: right;
width: 50%;
background:red;
}
</style>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
Вратце, в чём суть: в данном случае есть три обязательных компонента — width: 100%, overflow: hidden и, самый важный, clear: right (я его поставил сейчас для всех элементов списка, но, если у них будут разные классы, то можно приписать это свойство только для последнего).
Несмотря на небольшой недостаток (немного отрезается правый край у последнего <li>-элемента), способ очень и очень хороший. Спасибо всем остальным читателям, которые прислали такое же решение, но чуть позже.
