List to columns

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	to break down a list into columns.

The easiest way would be to work with each column invididually using :nth-child(n) CSS selector, but the number of selectors will grow with the number of columns. Besides, this solution will not work with older browsers. Thus, we’ll use display:inline-block and vertical-align:top for <li> and a “specific” solution for IE, as usual.

Drawbacks. In browsers that don’t understand inline-block users will be able to follow a link by clicking empty space.

Note. The solution is to be used when changing HTML code is not an option.

How it looks in the browser

<style type="text/css">
ul.columns { margin: 0; padding: 0; list-style-type: none; word-spacing: -1ex; }
/* 
    Firefox before version 3&nbsp;knows nothing about inline-block.
    That&rsquo;s why we&rsquo;ll use -moz-inline-stack for&nbsp;it.
*/
.columns li { display: -moz-inline-stack; display: inline-block; //display: inline; }
/*
    We&rsquo;ll use a&nbsp;filter to&nbsp;prevent links 
    from being activated by&nbsp;clicking an&nbsp;empty space.
*/
.columns a, .columns b { display: inline; word-spacing: normal; //display: inline-block; //filter: alpha(opacity=100); }
.columns a, .columns b, x:-moz-any-link { display:block; }
/*
    If&nbsp;Firefox is&nbsp;newer than 2.0, 
    returning a&nbsp;and b&nbsp;to&nbsp;inline
*/
.columns a, .columns b, x:-moz-any-link, x:default { display: inline; }
.columns li, .columns a, .columns b { vertical-align: top; }

/* customize */
.columns li { margin: 0 10% 0.4em 0; //margin: 0; width: 40%; //width: auto; }
.columns a, .columns b { //margin: 0 10% 0.4em 0; //width: 40%; }
.columns ul { width: 100%; }
</style>
<ul class="columns">
    <li><b>List broken into columns</b></li>
    <li>https://developer.mozilla.org/en/CSS/display">Description and a&nbsp;list of&nbsp;all possible values of&nbsp;display property in&nbsp;CSS (including specific values for Firefox)</a></li>
    <li>http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#nth-child-pseudo"><nobr>nth-child</nobr> pseudo-class specification on&nbsp;W3C website</a></li>
    <li>http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing">
    <nobr>word&ndash;spacing</nobr> property specification on&nbsp;W3C website</a></li>
</ul>

Order a design...

List to columns July 27, 2009

How it looks in the browser