I need some guidance. My goal is to create a collection of icons within a container of fixed width. These elements should be contained within the parent container but should extend beyond its boundaries without breaking onto a new line when they hit the right edge.
Currently, I am using floated li elements
Please refer to this example
This is how I want it to appear:
Not like this:
Any help would be greatly appreciated.
Below is the code snippet:
<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;
}