Automatically expanding gap in-between navigation buttons - CSS - css

Question

I am making top navigation with CSS. Some of the buttons are floated to the left, and some of them to the right. There is empty gap-button in-between. How to make that gap auto-expandable so the whole top navigation takes 100% of the page?
Here is a link for an example image:
HTML:
<div class="row clearfix">
<div class="top_nav">
<ul>
<li>
<div class="ui-nav-button first">
<a class="button first" href="#"><i class="icon-home"></i></a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button" href="#">About</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button" href="#">Contact</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button empty">.</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button dropdown" href="#">Hi, Michael<i class="icon-sort-down"></i></a>
</div>
</li>
<li>
<div class="ui-nav-button last">
<a class="button logout last" href="#"><i class="icon-off"></i></a>
</div>
</li>
</ul>
</div>
</div>
CSS:
/* Clear fix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.top_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.top_nav ul li {
display: inline;
}
div[class*="ui"] {
vertical-align: top;
display: -moz-inline-stack;
float: left;
position: relative;
height: 44px;
margin-bottom: 3px;
background-color: #444444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
zoom: 1;
*display: inline;
}
.top_nav a.button, .top_nav div[class*="ui"] {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.button {
float: left;
position: relative;
bottom: 3px;
height: 28px;
line-height: 32px;
padding: 8px 30px;
background-color: #f7f7f7;
text-decoration: none;
letter-spacing: 0.1em;
color: #777777;
font-weight: bold;
border-left: 1px solid #cecece;
font-family: sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.input:focus {
outline: none;
border-color: #9d9d9d;
}
.button i {
position: relative;
line-height: 23px;
top: 1px;
}
.dropdown_nav {
display: none;
}
/* Set your empty space with */
.button.empty {
width: auto;
text-indent: -9999px;
}
.button.dropdown i {
margin-left: 15px;
margin-right: -15px;
}
.button.first, div[class*="ui"].first {
border: 0px;
-webkit-border-top-left-radius: 3px !important;
-webkit-border-bottom-left-radius: 3px !important;
-moz-border-radius-topleft: 3px !important;
-moz-border-radius-bottomleft: 3px !important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
.button.last, div[class*="ui"].last {
-webkit-border-top-right-radius: 3px !important;
-webkit-border-bottom-right-radius: 3px !important;
-moz-border-radius-topright: 3px !important;
-moz-border-radius-bottomright: 3px !important;
border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
.button.first, .button.last {
padding: 8px 15px;
}
.button[href]:hover {
bottom: 4px;
-webkit-transition-property: top, bottom;
-moz-transition-property: top, bottom;
-o-transition-property: top, bottom;
-ms-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
-ms-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.button[href]:active {
bottom: 0px;
}
.button i {
font-size: 19px;
}
CSS/HTML link: http://jsfiddle.net/xRCqx/.

Answer 1

Here's the clean code.
HTML:
<div class="row clearfix">
<div class="top_nav">
<ul>
<li>
<div class="ui-nav-button">
<a class="button" href="#">About</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button" href="#">Contact</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button dropdown" href="#">Hi, Michael<i class="icon-sort-down"></i></a>
</div>
</li>
</ul>
</div>
</div>
CSS:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.top_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.top_nav ul li {
display: inline;
}
div[class*="ui"] {
vertical-align: top;
display: -moz-inline-stack;
float: left;
position: relative;
height: 44px;
margin-bottom: 3px;
background-color: #444444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
zoom: 1;
*display: inline;
}
.top_nav a.button, .top_nav div[class*="ui"] {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.button {
float: left;
position: relative;
bottom: 3px;
height: 28px;
line-height: 32px;
padding: 8px 30px;
background-color: #f7f7f7;
text-decoration: none;
letter-spacing: 0.1em;
color: #777777;
font-weight: bold;
border-left: 1px solid #cecece;
font-family: sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.input:focus {
outline: none;
border-color: #9d9d9d;
}
.button i {
position: relative;
line-height: 23px;
top: 1px;
}
.dropdown_nav {
display: none;
}
/* Set your empty space with */
.button.empty {
width: auto;
text-indent: -9999px;
}
.button.dropdown i {
margin-left: 15px;
margin-right: -15px;
}
.button.first, div[class*="ui"].first {
border: 0px;
-webkit-border-top-left-radius: 3px !important;
-webkit-border-bottom-left-radius: 3px !important;
-moz-border-radius-topleft: 3px !important;
-moz-border-radius-bottomleft: 3px !important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
.button.last, div[class*="ui"].last {
-webkit-border-top-right-radius: 3px !important;
-webkit-border-bottom-right-radius: 3px !important;
-moz-border-radius-topright: 3px !important;
-moz-border-radius-bottomright: 3px !important;
border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
.button.first, .button.last {
padding: 8px 15px;
}
.button[href]:hover {
bottom: 4px;
-webkit-transition-property: top, bottom;
-moz-transition-property: top, bottom;
-o-transition-property: top, bottom;
-ms-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
-ms-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.button[href]:active {
bottom: 0px;
}
.button i {
font-size: 19px;
}