How do I make elements with float not line break and extend outside their parent container?

Question

I am stumped. I am trying to make a set of icons that sit inside a container with a fixed width. The elements must be inside the parent container but must extend beyond the boundary and not line break when they reach the right border of the parent.

I am using Floated li elements

Here is the fiddle

Would like it to look like this.

Not this:

Thanks for any Help.

Here is the Code:

<div class="mainFooter">
<div class="iconContainer">
    <ul class="nav nav-pills">
        <li rel="tooltip" data-original-title="Services"><a class="icon-th-list icon-white">A</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">B</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Clients"><a class="icon-group icon-white">C</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Reports"><a class="icon-dashboard icon-white">D</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Preferences"><a class="icon-cogs icon-white">E</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">F</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">G</a>
        </li>
    </ul>
</div>

 .mainFooter {
    background: #dddddd;
    position: relative;
    height: 40px;
    width:30%;

    }
.iconContainer {
    position: absolute;
    width: 100%;
    border:1px solid red;
    top:5px;
}
.mainFooter .nav > li{
    float:left;
}
.mainFooter .nav > li > a {
    padding:0px;
    margin: 1px;
    height:25px;
    width:30px;
    background:#2f65bb;
    color: #ffffff;
    font-size: 130%;
    line-height: 25px;
    display: inline-block;
    text-align:center;
}

Answer 1

.white-space: nowrap on the <ul>. Do not float the elements, but use display: inline-block.

http://jsfiddle.net/nJydR/3/