Styling your ordered & unordered list items into 2 columns

In a previous post I showed you how to create a custom widget, then I showed you how to create a widget for your monthly archives, and limit the month’s that show. I am showing the past 4 months in my widget at this time.

One of my readers: Alex asked:

How did you make the archives widget to show the dates separately into two columns?

Now I will show you a CSS trick to create this effect:

First we will give the unordered list a width of 100%:

ul#archives {
 width:110%;
 }

Then we will style the <li> nested inside.

ul#archives li {
 display:inline;
 float:left;
 width:120px;
 }

And that is it. Please make sure that you clear the float after your closing </ul>.