You Are Here Home > Multi Column Lists

Multi Column Lists

Assuming that we want a 2 column list, here is the CSS:

ul#multi-column-list {
	width: 200px;
}
 
ul#multi-column-list li {
	width: 100px;
	float: left;
}

And HTML:

<ul id="multi-column-list">
   <li>Left</li>
   <li>Right</li>
   <li>Left</li>
   <li>Right</li>
   <li>Left Again</li>
   <li>Right Again</li>
</ul>

As you can see when the ul is 200pxs and lis are each 100pxs in width, your list will be arranged in 2 columns, so if you want to create a 4 column list, set the li’s width to 50px:

ul#multi-column-list {
	width: 200px;
}
 
ul#multi-column-list li {
	width: 50px;
	float: left;
}

HTML:

<ul id="multi-column-list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
Multi Column Lists
Filed under: CSS   Posted by: Hamid

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment