Creating perfect columns using lists

The following block shows how to achieve "columns" using list items. This is sort of tabular, sort of not tabular.

ul, li { margin: 0; padding: 0; list-style: none; }
ul {
	width: 400px;
	border-left: 1px solid #900;
	border-bottom: 1px solid #900;
}
/* contain floats */
ul:after { display: block; clear: left; content: "."; overflow: hidden; height: 0; }
* html ul { height: 0; }

/* make columns */
ul li {
	display: block;
	height: 150px; overflow: hidden;
	line-height: 150px;
	width: 99px;
	
	border-right: 1px solid #900;
	border-top: 1px solid #900;
	
	text-align: center;
	float: left;
	
	background-color: #fff;
}

Ordered columns

The following example puts the first items in the left and the second set of items on the right. The "second column" is set off using a class. Although, it may, in some instances, be appropriate to use a second list altogether (as a sublist).

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
#ordered ol, #ordered li {
			margin: 0; padding: 0;
			display: block;
		}
		#ordered ol { 
			position: relative; 
		}
		#ordered li {
			float: left;
			clear: left;
			width: 50%;
		}
		#ordered li.col2 {
			float: none;
			clear: none;
			width: auto;
		}