CSS (3) столбцы, множественные ul's

Question

Я работаю на горизонтальном прокручиваемом сайте. Элементы на сайте размещены в структуре UL> LI, чтобы создать несколько блоков.

Проблема, что у меня есть, я хочу 2 набора UL после eachother, но они будут перекрываться. Попытался найти это в Интернете, но никто не сделал то, что сделал.

И пример того, что я пытаюсь сделать, можно найти здесь: http://jsfiddle.net/DHbtx/2/ Там вы увидите, что 2 UL перекрываются из-за «float: left» и без элементов блока. Я попытался добавив: после псевдо элемента, но не работает (от: Multi-column issue with horizontal scroll)

li:last-of-type:after { 
    content: ''; 
    display: block; 
    width: 15px; 
    height: 1px; 
    float: right; 
    margin-right: -15px; 
    margin-top: -1px; 
} 

Может кто-нибудь помочь мне с этой проблемой? Я очень ценю любую помощь, которую вы можете предоставить.

Answer 1

Попробуйте дать ul элементы шириной, скажем, 50%.

ul 
{ 
    width: 50%; 
    ... 
} 

FIDDLE