Categories: Tips & Tricks

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

Web Master

Hi, I am Miguel, I bought this site in 2009. So I now run or manage the site. Please visit my new website or follow me on twitter @W3i.

View Comments

Recent Posts

Do Smart Research on Keywords for Better Search Engine Optimization

                        Would you like a recipe, if it…

3 hours ago

Grow Your Real Estate Business With Pinterest

Pinterest is a social media website where users share their favorite images from around the…

15 hours ago

4 Super Easy Ways to Improve SEO

Having a web presence is extremely important when it comes to marketing your business, and…

1 day ago

Understanding the Value of LinkedIn Social Link Sharing

Chances are you have a Facebook and Twitter account, but what about LinkedIn? Do you…

2 days ago

WordPress: Provides a Great Framework for Your Website

It doesn’t really matter in what kind of business you are; it is human behavior…

2 days ago

The Top Security Extensions for Google Chrome

With Google Chrome extensions, you can tweak your Google browser and make it more user-friendly.…

3 days ago