RSS

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:

<ul>
   <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>
</ul>

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:

<style>
   ul { width:400px; }
   li  { width:200px; float:left; }
</style>

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

Advertisements
 
4 Comments

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: