Divide a page in 8 perfect fluid columns?

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">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </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;

Vote

Show us the code or we can't possibly help. jsfiddle.net is a good place to start – Lalise

Check out Twitter Bootstrap or the 960 Grid System. Don't reinvent the wheel. – Petua

@Petua - I'm not trying to do that for all my page, I want that only for my footer, no spaces between the blocks, no padding no margins, just 6 or 8 simple blocks which are equally distributed along the page's width. I know of the bootstrap, but I'm not comfortable using any frameworks ( it sound stupid though ). – Vote

Can you also post the basic HTML of the footer? It may be relevant. A jsfiddle or link to a live page is even better. Also, is this plan CSS or are you using LESS or Sass/SCSS? If it's generic CSS then you have some CSS problems. – Unmistakable

I'm using LESS, but the HTML it's generated by a plugin, anyway, I'll paste what it's output in the browser. – Vote

It looks like your rules for footer are missing the closing } - though it's a little hard to tell if that's just a typo here or in your code or otherwise. – Unmistakable

No, I won't provide support for IE at all, I will use Modernizr and a php script to snap some div or a new page ( I haven't yet decided ) in place which will tell the user to choose another browser. Though I'm using prefixes for IE9 and what's to come next, because I know IE9 provides some support for some CSS3 features ( not for animations sadly ) – Vote

Please paste the actual CSS here, not LESS. We cannot test your problem that way. – Zared

@Truth - Sure, let me compile. – Vote

Answer 1

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">
            <a href="">Fluid Column Fluid Column Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
            <a href="">Fluid Column Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
            <a href="">Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
        </nav>
    </div>
</footer>

CSS

.navigation {
    overflow: auto;
    background: gray;   
}

.navigation a {
    width: 16.6%;
    float: left;
    display: block;
    border-bottom: 1px solid black;
}
​

​

Lutist

Ideally, you should include the code from your demo in your answer. (I didn't downvote.) – Hesione

Exactly. If jsfiddle goes down your answer is meaningless. Please do so and I will remove my vote. – Zared

This is the same thing I'm doing, yet the same result. Also, I'm floating the elements to left. – Vote

Roland, what's it doing that's incorrect? Try just using standard css instead of LESS for that part – Lutist

No, it works now, if you look closely at my code, I added a little padding in pixels and that's what made it not work. Just that it's difficult now to divide 100 percent by 6 blocks, it just doesn't work. It's much better with 8 blocks because it divides with 12.5. – Vote

You could get it close, and then use javascript to set exact PX widths – Lutist

Answer 2

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

Hesione

That would work, just that I'm not using table displays. Though I saw in the twitter bootstrap, made with LESS, using something like this in combination with MQ. – Vote