Проблема с переносом внутри inline-block

[Ovjer]

Привет всем.

Есть четырёх-колонная страница. В каждой колонке: заголовок и список. Каждый элемент списка состоит из одного input'а типа checkbox и блока с двумя span'ами текста. Страница выглядит вот так.

Проблема в следующих участках кода:

	<li>
		<input name="" type="checkbox">
		<section>
			<span class="first-line">Текст</span><br>
			<span class="second-line">Текст</span>
		</section>
	</li>

li {
	white-space: nowrap; /* Иначе после input'а section переносится на след. строку */
}
input {
	margin-top: 0.4em;
	vertical-align: top;
}
section {
	display: inline-block;
	margin-left: 5px;
	white-space: normal;

Всё бы хорошо, но если внутри тега span перенос текста происходит корректно, то тег section принимает такую ширину, будто никакого переноса не было. Если такой перенос текста происходит в последней колонке, она увеличивает ширину страницы и появляется полоса горизонтальной прокрутки, что вы и можете наблюдать по ссылке. Подскажите, как избавиться от такого поведения тега section?

Edited January 4, 2011 by Ovjer