Putting a list in two columns in CSS

Question

I cannot figure out how to get a list in a two-column list. I tried some of the examples on other similar issues, but that 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 would like to have 5 items in the list, then 5 more to the right of it.

Within one hour: (

Answer 1

column-count can 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 check browser support as it will not work in older versions of IE

Here is a screenshot of the working code

Answer 2

Inside your CSS code, put this:

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

I hope this is enough.

Answer 3

set li width to 50% and display: inline-block;

Answer 4

You can also add the following css attributes to your li elements:

 .skills li { float: left; width: 50%; }