CSS fluid layout without tables

Everything online points me to stop using tables, which I've tried my best to do, but I've come across a problem which tables seems to be the only solution for. I have 5 inline-block elements that I want spaced evenly across 100% of the width of the pa开发者_开发百科ge. I put a width of 20% on the style and set the margin and padding to zero. When I view the page, everything looks pretty good except for the horizontal scrollbar added to the page. If I put these elements in a 100% width table with 5 columns this isn't a problem. In this case do I need to use a table or is there a better solution?

BTW, I've tried this in both Chrome and IE8.

Update: Something I've discovered is that a ~5px gap is being inserted between my elements (found by putting a background-color on them). I have no clue why, as nothing in my styles denotes this:

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

.links { white-space: nowrap; width: 100%; }

.links a { display: inline-block; width: 20%; padding: 0; margin: 0; color: White; background-color: #4C8331; }

Another update:

After JMC Creative pointed out my dumb mistake of putting spaces between the anchors that almost fixed the issue, but now there is one pixel of scrollbar. I see no inherited style that should cause this.

Try putting them in a container. Like so:

#container {
    margin: 0;
    padding: 0;
    width: 100%;
}

#boxes {
    float: left;
    width: 20%;
}

Your html markup has a space in between the a tags. So therefore it's being rendered as 5 blocks which are 20% wide and 4 spaces of roughly 4px each. So you end up with 100% + 16px.

Edit

In order to solve the scrollbar that is plaguing you in IE, you could set up a conditional comment like so:

<!--[if IE]>
<style type="text/css"> .links { overflow: hidden; } </style>
<![endif]-->

Be sure your body and html set to margin: 0; padding: 0;.

Have you tried using overflow: hidden? Or more specifically overflow-y: hidden?

You want to float your anchors. Doing it this way works for me.

CSS:

.links {
    width: 100%;
}

.links>a {
    float: left;   
    display: inline-block;
    width: 20%;
    padding: 0;
    margin: 0;
    color: #fff;
    background-color: #4C8331;
}

HTML:

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

You may get a scrollbar or see some of the anchors wrapped to another line if there isn't room to fit them all on the page (ie, content overflows the width). I will note that I have seen IE get this wrong and incorrectly wrap when it shouldn't. It seems like a rounding issue and could be worked around.