Spreading List Items Techniques

Sometimes even a simple issue can become a real problem with CSS. The main thing is to make it cross-browser. One of such examples is spreading a list evenly across the total width of the container.

Let’s try to solve this step by step. For instance, the basic html is quite easy. Here is an unordered list with 4 items:

<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>

We need to perform the following:

• To spread the list items evenly across the whole width of the container.
• There should be no gaps between the list items.
• It is necessary that the list keeps its behaviour in an elastic layout.
• Note that typical reset CSS statements and browser fixes are not included in the code previews.

If 4 times 25% isn’t 100%

ul li {width:25%; float:left;}

The most simple solution is to float all list items with a width of 25%. However, Opera and Safari result in width below 100%, while IE has a resulting width exceeding 100%.

There is also a problem concerning how Opera handles % sizing. This browser can’t handle fractions (it reverts 44.44% to 44%) that also makes the behaviour across other browsers unpredictable. You also can tinker with the percentages (34% – 35% – 34%), but still it doesn’t meet our requirements listed above.

More Practice with Floats, Margins and Paddings

ul {padding-right:75%;} ul li {float:left; width:100%;} ul li+li {margin-right:-100%; float:right;} ul li+li+li {margin-right:-200%;} ul li+li+li+li {margin-right:-300%;}

The next idea is to give ul element a right-padding of 75%. You can make all list items 100% just making them 25% wide compared to the whole container. Thus, the first item will be floated to the left while the following once will be floated to the right. All items except the first one will be repositioned to with a negative margin.

It works for Opera, Safari and Firefox. But it fails as soon as a border is applied to the ul element. It just doesn’t work with 75% padding calculation. However, we can just wrap the list and apply the border to the wrapper to fix it.

However, IE doesn’t support such a decision and set negative margins going above 100% to a default 100%. The other thing to consider is that IE6 can’t handle the + operator in CSS. In other words, each list item has to receive a separate class. Too complicated and unnecessary in case you are going to expand list with new items.

Column Layouts

ul li {width:25%; float:left;} ul li.last {margin-left:75%; float:none; width:auto;}

We also can give all elements a width of 25% and float them to the left while the last li element should be reset to normal behaviour with margin-left of 75%.

The good thing is that IE7 handles this correctly. Firefox, Opera and Safari show a little gap between the third and last item. To fix it you can apply a left margin that is slightly smaller, for example, 74.5%. However, Firefox doesn’t accept it and applies to left margin from the third list element, throwing the last element out of the container. So, any improvements to this are required.

Reference: www.onderhond.com/blog/work/spreading-list-items