Маркированный список ul в две колонки через CSS2

Достаточно интересный способ организации обычного маркированного списка в две колонки.

Имеется определенное количество элементов li списка ul. Нужно организовать все li в две колонки. Первое, что приходит на ум - это воспользоваться новыми правилами CSS3.

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.

Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов li я специально сделал нечетным:

<ul>
  <li>Колонка 1</li>
  <li>Колонка 2</li>
  <li>Колонка 3</li>
  <li>Колонка 4</li>
  <li>Колонка 5</li>
  <li>Колонка 6</li>
  <li>Колонка 7</li>
  <li>Колонка 8</li>
  <li>Колонка 9</li>
  <li>Колонка 10</li>
  <li>Колонка 11</li>
</ul>

Сделаем CSS-стилизацию списка, ничем не примечательную. Класс .clearfix добавим в HTML-разметку для элемента ul - это классическая очистка потока для плавающих потомков внутри блока-родителя. Элементы li у нас будут плавать внутри ul:

ul{
  list-style-type: none;
  width: 398px;
  margin: 100px auto;
  border: 1px solid #000;
  font: bold italic 16px/30px Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

Вот теперь немного интереснее, когда приступим к элементу li. Вся “фишка” в организации их в два столбца благодаря двум CSS-правилам - display: block и width: 45%.

Все элементы сделаем плавающими влево float: left, поэтому CSS-правило display: block можно опустить за ненадобностью, но оставим его для наглядности примера. Получается, что каждый из элементов li является блочным, с фиксированной шириной и плавает влево.

В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним - “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее - опять все по порядку. Три правила padding-bottom: 10px, text-align: center, background-color: #556677 - для красоты добавляем:

ul li{
  display: block;
  float: left;
  width: 45%;
  padding-bottom: 10px;
  text-align: center;
  background-color: #556677;
}

Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом nth-child с аргументом even, чтобы избежать дополнительной нагрузки на разметку в виде классов, которые придется добавлять в противном случае:

li:nth-child(even){
  margin-left: 10%;
  background-color: #667788;
}

На этом все.