How to create elements with a float rather than a line break and go beyond their parent container?

Question

How to create elements with a float rather than a line break and go beyond their parent container?

I'm at a dead end. I am trying to create a set of icons that are inside a container with a fixed width. Elements should be inside the parent container, but should go beyond the border, and not break the line when they reach the right border of the parent.

I am using elements of floated li

Here is the fiddle

I wish it looked like this.

enter image description here

Not this:

enter image description here

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; }