I got a little tired of my lists just going straight down the page and leaving gaping white spaces to the right. So, I devised a quick way to create multiple columns for lists using some simple CSS tricks. The result was a horizontal display of either ordered or unordered lists instead of the standard vertical output.

The HTML for the lists really doesn’t change with the exception of adding a class=” ” tag to the <ul>. So, here’s an HTML list:

<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
</ul>

The trick to creating the multiple columns is to set a ‘width’ for the <ul> then set widths for the <li> that would allow the <li>’s to lay next to each other. To produce that we also use the ‘float’ element.

.story ul {
width: 575px;

}

.story li {
width: 250px;
margin-left: 10px;
line-height: 1.5em;
float: left;
}

Here i’ve set a class name of  ‘story’ since my list was in an article. Next, I set a width for the <ul> of 575 pixels. Next, I set the parameters for the <li> items by setting the width to 250 pixels, placing some space between them my setting a left margin of 10px, then to give it an uncrowded look I added a little line height. The final key in the puzzle is the float: left; element which is what aligns the list items next to each other.

You can create 2, 3  or more columns using this method by adjusting the width of your <ul> or <ol> as well as the <li> items contained.