Putting a list into two columns in CSS

Question

I can't figure out how to get my list into a two column list. I tried some of the examples in other similar questions but it just doesn't change anything.

<div class="section" id="skillset">
<h1>SKILL SET:</h1>
<h2>Have passed classes which taught all of the following:</h2>
<ul class="skills">
    <li>Intermediate Spanish</li>
    <li>Microsoft Word</li>
    <li>Microsoft Power Point</li>
    <li>Microsoft Excel</li>
    <li>Dreamweaver</li>
    <li>Adobe Photoshop</li>
    <li>CAD Lab</li>
    <li>Visual Basic</li>
    <li>C++</li>
    <li>Java</li>
</ul>
</div>

I'd like to have 5 items in the list then another 5 to the right of it.

Due in one hour :(

Answer 1

column-count can surely help you here.

Just add the following CSS

.skills
{
    -moz-column-count: 2;
    -moz-column-gap: 2.5em;
    -webkit-column-count: 2;
    -webkit-column-gap: 2.5em;
     column-count: 2;
     column-gap: 2.5em;
}

but do check the browser support as it will not work in older versions of IE

Here is a Fiddle demo of working code

Answer 2

Inside your CSS code things, put this:

.skills {
/* other codestuff */
column-count: 2;
}

I hope this is sufficient.