How to make two column list items using basic CSS

by

The following CSS can be used to make HTML listed items use two or more columns.

For example,

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Becomes this,

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

There are two ways to apply the CSS – inline and stylesheet.

Inline CSS

The above example uses inline – where the CSS has been manually applied to each element.

Inline CSS allows precise control of the CSS, but is not scalable and adds to the page size (which can affect SEO).

I would only suggest inline CSS where it’s a once off use or you do not have access to your websites stylesheet)s).

This was done by applying this code to the containing UL or OL element

style="display: inline-block;"

And this code to each LI element

style="float: left; list-style: outside none none; width: 50%;"

Which gives us

<ul style="display: inline-block;">
    <li style="float: left; list-style: outside none none; width: 50%;">Item 1</li>
    <li style="float: left; list-style: outside none none; width: 50%;">Item 2</li>
    <li style="float: left; list-style: outside none none; width: 50%;">Item 3</li>
    <li style="float: left; list-style: outside none none; width: 50%;">Item 4</li>
    <li style="float: left; list-style: outside none none; width: 50%;">Item 5</li>
</ul>

Stylesheet

A stylesheet is a part of your websites theme. It contains all the CSS code that tells the browser how to display the content.

Typically a single stylesheet called styles.css will be located in your theme folder and will be applied to all pages.

With a stylesheet you need to choose where to ‘target’ the styles specified. There are many options for how to target elements, but in this example will be using classes. For example class=”twocolumns”.

The CSS will look like this

ul.twocolumns {
    display: inline-block;
}

ul.twocolumns li {
    float: left;
    list-style: outside none none;
    width: 50%;
}

and your HTML will look like this

<ul class="twocolumns">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

How do I add more columns?

The examples above used 50% to create to columns – simple change the percent to change the number of columns.

  • 2 columns = 50%
  • 3 columns = 33%
  • 4 columns = 25%
  • 5 colunns = 20%
  • 6 columns = 16%