Create Multi Coloumn Lists With CSS

Recently I did a few posts on creating usable navigation menus using CSS that offered a greater level of functionality with a much better & attractive interface. Today, once again I will be doing another post on CSS. Here I will be discussing about how to create multiple column lists with CSS.

By default, HTML wraps up any list in a single vertical column with either numbering or bullets. Today we will be using CSS to create html lists that will spread in multiple columns & will not contain those conventional bullets & numbers. Instead, our new list menu will be sporting a background image with some mouse hover effects to top it with.

The complete procedure for creating multi column list in CSS will be divided into 3 steps for a better & clear understanding of the concept. You are advised to follow each step in chronological order & don’t skip steps in between in order to reach the final product too early.

Step 1: Our first step in creating multi column list is to create a plain, ordered list pair in html & subsequently writing CSS rules for the various list elements to position them in multiple columns instead of their default vertical wrapping.

HTML Code:

<div class=”wrapper”>                    <!– Beginning of Wrapper Class –>
<ol>
<li><a href=”#”>link 1</a></li>  <!– Hyperlink each list item –>
<li><a href=”#”>link 2</a></li>
<li><a href=”#”>link 3</a></li>
<li><a href=”#”>link 4</a></li>
</ol>
<br />
</div><!– End of .wrapper –>

CSS Code:

/* allow room for 3 columns */
ol
{
width: 40em;           <!– Allowing room for 3 columns. Taken in ems for higher flexibility –>
}

/* float & allow room for the widest item */
ol li
{
float: left;
width: 10em;               <!– Multi Column & float from left –>
}

/* stop the float */
br
{
clear: left;
}

/* separate the list from subsequent markup */
div.wrapper
{
margin-bottom: 1em;
}

Output of Step 1:

Step 2: In the second step we will swap the rows with columns in order to accommodate more lists & wrap multiple lists in different columns. We will use start & value attributes of html lists to wrap multiple lists in sequence in different columns. We will put some hover effects too.

HTML Code:

<div class=”wrapper”>
<ol>
<li><a href=”#”>Link 1</a></li> /* Beginning of List 1 with element value 1 */
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ol>
</div>

<div class=”wrapper”>
<ol start=”6″>
<li><a href=”#”>Link 6</a></li> /* Beginning of new list, but in continuation with the previous list using the start */
<li><a href=”#”>Link 7</a></li>
<li><a href=”#”>Link 8</a></li>
<li><a href=”#”>Link 9</a></li>
<li><a href=”#”>Link 10</a></li>
</ol>
</div>

<div class=”wrapper”>
<ol>
<li value=”11″>Link 11</a></li> /*Combining the third list with the end of second list using value */
<li><a href=”#”>Link 12</a></li>
<li><a href=”#”>Link 13</a></li>
<li><a href=”#”>Link 14</a></li>
<li><a href=”#”>Link 15</a></li>
</ol>
</div>
<br />

CSS Code:

div.wrapper
{
float: left;                         <!– To render div float left( multi column look) –>
width: 10em;
}

/* clear float after lists */
br
{
clear: left;
}

/* styling the anchor */
ol li a
{
display: block;
width: 4em;     <!– Always Set in Ems for flexibility –>
text-decoration: none;
}
ol li a:hover
{
color: #FFFFF; /* white */
background-color: #9966FF; /* purple */
}

Output of Step 2:

Step 3: This is the final step. Here we will remove the list position markers, remove the start & value attributes & enclose all the list elements within a single ul id. Once it is done, we will apply a background image to the group & arrange each li element such that each one of them gets a portion of the background image in symmetry.

HTML Code:

<div class=”wrapper”>
<ul id=”step3″>
<li class=”link1″><a href=”#”>link 1</a></li>     /* Setting common properties to every element in the list by creating a enclosing them in a class */
<li class=”link2″><a href=”#”>link 2</a></li>
<li class=”link3″><a href=”#”>link 3</a></li>
<li class=”link4″><a href=”#”>link 4</a></li>
<li class=”link5″><a href=”#”>link 5</a></li>
<li class=”link6″><a href=”#”>link 6</a></li>
<li class=”link7″><a href=”#”>link 7</a></li>
<li class=”link8″><a href=”#”>link 8</a></li>
<li class=”link9″><a href=”#”>link 9</a></li>
<li class=”link10″><a href=”#”>link 10</a></li>
<li class=”link11″><a href=”#”>link 11</a></li>
<li class=”link12″><a href=”#”>link 12</a></li>
<li class=”link13″><a href=”#”>link 13</a></li>
<li class=”link14″><a href=”#”>link 14</a></li>
<li class=”link15″><a href=”#”>link 15</a></li>
</ul>
</div><!– .wrapper –>

CSS Code:

div.wrapper
{
margin-bottom: 1em;
}

ul#step3
{
width: 30em;
margin: 0;
padding: 0;
border: 1px solid #A52A2A; /* brown */
background-image: url(“background.jpg”);
}
ul#step3 li
{
/* list item dimensions */

width: 10em;
height: 2em;

/* Clear the default margins & padding
for cross-browser efficiency */
margin: 0;
padding: 0;

/* disable list markers */
list-style-type: none;
}

/* Styling the anchor tag */
ul#step3 li a
{
display: block;
background-color: #ffffff;
width: 10em;
line-height: 2em;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #ff3300; /* brown */
}
/* mouseover gets the bright photo */
ul#step3 li a:hover
{
color: #FFFFF; /* white */
background-image: url(“background.jpg”);
}

/* give each list item a piece of the picture */

li.link1 a { background-position: 0em -0em }
li.link2 a { background-position: 0em -2em }
li.link3 a { background-position: 0em -4em }
li.link4 a { background-position: 0em -6em }
li.link5 a { background-position: 0em -8em }

li.link6 a { background-position: -10em -0em }
li.link7 a { background-position: -10em -2em }
li.link8 a { background-position: -10em -4em }
li.link9 a { background-position: -10em -6em }
li.link10 a { background-position: -10em -8em }

li.link11 a { background-position: -20em -0em }
li.link12 a { background-position: -20em -2em }
li.link13 a { background-position: -20em -4em }
li.link14 a { background-position: -20em -6em }
li.link15 a { background-position: -20em -8em }

/* Bring the first item of each column
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 2em line-height = 10em */

ul#step3 li.link6,
ul#step3 li.link11
{
margin-top: -10em;
}

/* Horizontal positions of the columns */
ul#step3 li.link1,
ul#step3 li.link2,
ul#step3 li.link3,
ul#step3 li.link4,
ul#step3 li.link5
{
margin-left: 0em;
}
ul#step3 li.link6,
ul#step3 li.link7,
ul#step3 li.link8,
ul#step3 li.link9,
ul#step3 li.link10
{
margin-left: 10em;
}
ul#step3 li.link11,
ul#step3 li.link12,
ul#step3 li.link13,
ul#step3 li.link14,
ul#step3 li.link15,
ul#step3 li.penn
{
margin-left: 20em;
}
</style>

Final OutPut:

You might also like:

1. Creating Navigation Menus with CSS
2. Styling Dead HTML Forms With CSS Part-1
3. CSS Pagination Links
4. Creating CSS Border in 2 easy Steps
5. Create Polls and Surveys on Your Website

Tags: css list, css list style