UL formatted to two or more columns

16 Aug

Very simple way to format UL or OL to two or more columns is to use float property.

Take this example – UL element with 8 LIs:

   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>

This is how UL looks without float property.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

To make the list look like we want it, we do the following:

   ul { width:400px; }
   li  { width:200px; float:left; }

And we get two column list like that:

If you want you can set width in percents. The number of columns depends on the width of the columns. For instance, to change the example above to 3 colums view, you would need to decrease the column size to 30%.


Posted by on August 16, 2008 in CSS, HTML


Tags: , ,

4 responses to “UL formatted to two or more columns

  1. crook

    January 24, 2010 at 7:26 pm

    thanks man,
    ive been searching the web for this

  2. Raphaël

    October 29, 2010 at 3:39 pm

    Great tip. Thanks!

  3. Rudy

    March 4, 2011 at 9:14 pm

    It’s not working for me under Internet Explorer 7. What should I do?

    • Dasha

      March 8, 2011 at 9:21 am

      Can you post your code please?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: