I few hours ago, while adding in the Roller Coaster list to my own site, I decided instead of having one giant, single column list, I wanted to split the list evenly between two columns. However, this presented the age old hassle of trying to find the midway point, and physically moving the bottom half to the next column. Instead of just plugging along, and making a table, I thought, if this exists in word processor programs (like MS Word) that you can change the layout, this function would exist in the HTML world.

I looked through all the options in Dreamweaver, visited all the “help” sites and after a hour of searching, was surprised I couldn’t find this option. Now normally, most people would just give up, but I refused. I know I would be up-dating this list often, and it’s a huge pet-peeve of mine to have to do things the inefficient way. There had to be others like me, who didn’t want to have to keep open the damn html page, add the new content, find the half way point, and copy and past, each time you needed to update.

After 3 more hours (yes, took that long to find… manly since I didn’t know what it was called) I found a post explaining that multi-column is a new part of CSS3 and will work in browser that have been up-dated.

All I had to do was add to my CSS the following:

#two_col
{
font-size:14px;
color: #FFFFFF;
-moz-column-count: 2; (number of columns)
-moz-column-gap: 20px; (space in between columns)
-o-column-count: 2;
-o-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 5px;
margin-left: 5px;
}


So when you add a single list of items like this:
<div id=”two_col”>
Item One
Item Two
Item Three
Item Four
Item Five
Item Six
</div>

It will show like this:

Or an block of text:
<div id=”two_col”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

It will show like this: