•  

Styling your ordered & unordered list items into 2 columns

By Austin On February 15, 2009 Under Tips & Tricks

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

4 Comments Add yours

  1. Alex
    February 15, 2009
    7:28 pm

    Thank you, man!

  2. trosor
    February 22, 2009
    2:04 pm

    nice information

  3. cotton
    February 23, 2009
    1:51 am

    This is great but is there away to make the list go 1-2 on the left column and then 3 & 4 on the right. I have spent ages trying to organize a list like that. I think it would make sense, if you have a list in 2 columns, you first read the left one and then the right one. Any thoughts or suggestions on this would be much appreciated

    • frosty
      February 23, 2009
      1:50 pm

      As far as I know, I don’t know a way to do this.