Breadcrumbs

Multi-Column Lists with CSS

When redesigning Lowter's homepage, one of the first decisions was to move the category list somewhere else because it took up a lot of valuable space. I decided to move the category list from the left-hand menu to the centre column towards the bottom of the page because, in the grand scheme of things, the category list is not very important. However, it would look horribly awful for the category list to remain vertical as it previously was in the left-hand menu. It made more sense to break the long category list into two columns to take advantage of and to compensate for the increased width. Whilst tables probably would have made the easiest solution, working well across browsers, it was decided to use CSS to create the multi-column list.

CSS multi-column lists are sadly not as easy to create as they should be. In the future, CSS3 will luckily have a multi-column module to make the process a snap. With the resources available to web developers now, however, multi-column lists are not very easy. I searched around on Google to find the best tutorial for creating multi-column lists, and I came across CSS Swag: Multi-Column Lists (external link) on A List Apart. The article details a few techniques for creating multi-column lists, although I selected the sixth method because the markup was more semantic. I was never able to get the method to work properly in IE7, but I was also using nested lists, which IE probably doesn't like.

Anyway, until CSS3 is fully implemented in every browser (which I wouldn't get your hopes up for), this article covers how to make multi-column lists using current CSS specifications.

Tags: