Back to CSS Tips
Preview: what the working site looks like.
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>    
    <div id="container">
        <ul id="multi">
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
        </ul>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;	
	padding: 100px 0 200px;
	overflow: auto;
	background: #999;
	box-shadow: 0 0 20px #8493A6;
}
	ul#multi {
		width: 400px;
		margin: 0 auto;
		padding: 0;
		overflow: auto;
		-moz-column-count:3; /* Firefox */
		-webkit-column-count:3; /* Safari and Chrome */
		column-count:3;
		list-style-type: none;
		background: #ccc;
	}
		ul#multi li {text-align: center;}