A very simple article today: a toplist courtesy of CSS.

The HTML is very straightforward. You want more or fewer columns, no problem and vertically you can use as few or as many links as you wish. Nor does it matter if there are the same number of links in each column.

<div class="toplist">
  <div class="tl-column">
    <ul>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
    </ul>
  </div>
  <div class="tl-column">
    <ul>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
    </ul>
  </div>
  <div class="tl-column">
    <ul>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
    </ul>
  </div>
  <div class="tl-column">
    <ul>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
      <li><a href="#">A Trade Link</a></li>
    </ul>
  </div>
</div>

There are a couple of potential pitfalls in the CSS. The first is that Firefox will not place the content which follows the toplist beneath it, unless you include the “hack” shown below. The second is that to avoid falling victim to Explorer’s buggy way of handling floats, the total width of the columns should never be more than 99% of the width of the containing div. Otherwise the CSS is also straightforward and can be customized to taste.

.toplist {
  /* if you want a margin above and below the toplist, replace the zero, thus */
  /* margin: 20px auto; */
  margin: 0 auto;
  /* the width may be fixed or a percentage */
  /*width: 99%; */
  width: 500px;
  }
/* Firefox hack */
/* keep this otherwise following content will appear alongside the toplist */
.toplist:after {
  content: ".";
  display: block;
  line-height: 1px;
  font-size: 1px;
  clear: both;
  }
.toplist ul {
  /* adjust the margin to suit */
  margin: 10px;
  padding: 0;
  list-style: none;
  /* text-alignment is left by default but can be changed */
  /* text-align: center; */
  }
.tl-column {
  /* IMPORTANT: the total width of the columns should be 98%-99% of the available width */
  width: 24.7%;
  float: left;
  }