Two column list – the elegant way

If you have two individual lists, instead of stacking them, you'll be able reduce scrolling by placing them side-by-side. The example below demonstrates one elegant way to achieve this.

The HTML

<div class="list-columns">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

The CSS

.list-columns ul { float: right; }
.list-columns ul:first-child { float: left; }