Flowing a list across multiple columns

Vertical positioning in pixels

Compare to: Vertical positioning in ems

The list below is a single <ul><li></li>...</ul> structure. Each item is given a unique class name "item1", "item2", etc. In the stylesheet, all of the items in a single column are given the same margin-left. Items that begin a new column (in this example, item6 and item11) are given a negative margin-top sufficient to bring them back up to the vertical position of item1. Normal document flow does the rest.

• A
• B
• C
• D
• E
• F
• G
• H
• I
• J
• K
• L
• M
• N
• O

This page validates as XHTML 1.0 Strict. Tested in Windows XP in Internet Explorer 6.0, Mozilla Firefox 0.8, Netscape 7.1, and Opera 7.23, and on the Mac in Safari 1.2. How does this look in other browsers? Suggestions for improvement? Write to paul at novitskisoftware.com

/* vertical positioning: */
li
{
	height: 20px;
}
/* = number of items in a column * height of each item */
.item6, .item11
{
	margin-top: -100px;
}

/* horizontal positioning: */
.item1, .item2, .item3, .item4, .item5
{
	margin-left: 5em;
}
.item6, .item7, .item8, .item9, .item10
{
	margin-left: 15em;
}
.item11, .item12, .item13, .item14, .item15
{
	margin-left: 25em;
}

<ul>
	<li class="item1">A</li>
	<li class="item2">B</li>
	<li class="item3">C</li>
	<li class="item4">D</li>
	<li class="item5">E</li>
	<li class="item6">F</li>
	<li class="item7">G</li>
	<li class="item8">H</li>
	<li class="item9">I</li>
	<li class="item10">J</li>
	<li class="item11">K</li>
	<li class="item12">L</li>
	<li class="item13">M</li>
	<li class="item14">N</li>
	<li class="item15">O</li>
</ul>