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

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

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

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

 
Колонка 1
 
Колонка 2
 
Колонка 3
 
Колонка 4
 
Колонка 5
 
Колонка 6
 
Колонка 7
 
Колонка 8
 
Колонка 9
 
Колонка 10
 
Колонка 11

Сделаем 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;
}

На этом все.