Способ борьбы с «прыгающими» блоками в IE

Володя Токмаков уже два раза освещал способы борьбы с этой напастью (способ 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>-элемента), способ очень и очень хороший. Спасибо всем остальным читателям, которые прислали такое же решение, но чуть позже.