Footer Items Expanding With Viewport Evenly

I'm trying to get a footer to display 5 items which space themselves out evenly, utilising the full width of the viewport. I've managed to get it working somewhat, but the last box

Solution 1:

You could use another element inside the li, having the border. That way the li could take the full 20% each.

http://jsfiddle.net/pnUnU/2/

HTML:

<footer class="footer">

    <ul>
        <li>
            <span class="content">
               Option 1
            </span>
        </li>
        <li>
            <span class="content">
               Option 2
            </span>
        </li>
        <li>
          <span class="content">
               Option 3
            </span>        
        </li>
        <li>
          <span class="content">
               Option 4
            </span>
        </li>
        <li>
          <span class="content">
               Option 5
            </span>
        </li>
    </ul>

</footer> <!-- end footer -->​

CSS:

.footer li
{
    float: left;
    line-height: 43px;
    text-align: center;
    color: white;
    width: 20%;
    background: grey;
}

.footer li span{
  display: block;
  border-right: 1px solid #fff;
}

.footer li:last-child span
{
    border: none;
}
​

Solution 2:

Demo

http://jsfiddle.net/pnUnU/1/