Divide a page in 8 perfect fluid columns? - css

Question

So I'm trying to divide a page ( in fact just a footer ) into 8 equal fluid columns ( I was aiming for 6 ), and the only way I thought I could do it is with percentage.
I set a percentage of width: 12.5%; to each of the columns ( which are in fact some links set as display: block; float: left;) and it should have worked, but it didn't. I mean the columns or links should have been equally divided in the page but there's still some space there, about 100px ( my screen has 1366px in width ).
So what should I do about that ? How can I divide the links / columns is 8 ( preferably 6 ) equal fluid columns ?
<footer>
<div class="footer-jigsaw"></div>
<div class="footer-wrapper">
<nav class="navigation">
</nav>
</div>
</footer>
footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:50px;
background-image:url(../gfx/background-light.png);
background-position:center center;
background-repeat:repeat;
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity=0);
}
footer .footer-jigsaw {
position:absolute;
top:0;
width:100%;
height:10px;
background-image:url(../gfx/footer.png);
background-position:0 center;
background-repeat:repeat-x;
z-index:5;
}
footer .footer-wrapper {
position:relative;
margin:0 auto;
width:100%;
height:50px;
}
footer .footer-wrapper .navigation {
position:relative;
margin:0 auto;
width:100%;
height:50px;
}
footer .footer-wrapper .navigation a {
position:relative;
float:left;
display:block;
cursor:pointer;
width:12.5%;
height:50px;
padding-top:0;
padding-left:10px;
padding-right:10px;
padding-bottom:0;
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#fff;
-webkit-transition:all .35s ease-in-out;
-moz-transition:all .35s ease-in-out;
-ms-transition:all .35s ease-in-out;
-o-transition:all .35s ease-in-out;
transition:all .35s ease-in-out;
}
footer .footer-wrapper .navigation a:first-child {
border:none;
}
footer .footer-wrapper .navigation a:last-child {
border:none;
}
footer .footer-wrapper .navigation a.jp-current {
background-color:rgba(0,0,0,0.2);
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#00b8f0;
}
footer .footer-wrapper .navigation a.jp-current:hover {
background-color:rgba(0,0,0,0.2);
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#00b8f0;
}
footer .footer-wrapper .navigation a:hover {
background-color:rgba(0,0,0,0.2);
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#00b8f0;
}
Above is a part of all the CSS, but there's where I'm trying to do what I just mentioned.
Problem Solved: extra padding added to the blocks;

Answer 1

No, I won't provide support for IE at all
Fantastic. In that case, you can use display: table (no support in IE7) along with table-layout: fixed (to ensure equal width columns).
Any number of columns are automatically supported, and as a bonus you get equal height columns for free.
Here's a demo with your HTML: http://jsfiddle.net/thirtydot/KusjP/
.navigation {
display: table;
table-layout: fixed;
width: 100%;
}
.navigation > a {
display: table-cell;
border: 1px solid #444;
}

Answer 2

KISS
http://jsfiddle.net/QjsSA/1/
Using his original code: http://jsfiddle.net/QjsSA/2/
<footer>
<div class="footer-jigsaw"></div>
<div class="footer-wrapper">
<nav class="navigation">
Fluid Column Fluid Column Fluid Column Fluid Column Fluid Column
Fluid Column
Fluid Column Fluid Column Fluid Column Fluid Column
Fluid Column
Fluid Column Fluid Column Fluid Column
Fluid Column
</nav>
</div>
</footer>
CSS
.navigation {
overflow: auto;
background: gray;
}
.navigation a {
width: 16.6%;
float: left;
display: block;
border-bottom: 1px solid black;
}
​
​