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:
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.
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.

Pin It on Pinterest

Share This