Html – how to center a div between another two (left and right) divs

csshtml

what i want to achieve is something like THIS, that is, to have 3 buttons, one to the left, one in the center, and one to the right, and in the same "line", but using css and divs, since I know using tables for laying out pages is just wrong.

I guess i need to use floats, and i already achieved to have the left and right divs correctly, but I can't get the center div to be, well, centered, it just jumps out of the line of the other two.

My attempt:

html:

<div class="left" ><input type="button" value="left" /></div>
<!--<div class="center" ><input type="button" value="center" /></div>-->
<div class="right" ><input type="button" value="right" /></div>

<!-- If I uncomment the center div, the right one appears in another block, below the others-->

css:

.left {
    float:left;
}
.right {
    float:right;
}
.center{
    /*what do i put here??*/
}

here is a fiddle with that, to mess up with.

How can I achieve it, and get the closest to the table layout example?

Note: I've looked in other similar questions, but I couldn't find one with the exact same issue.

Best Solution

How about this:

.left {
    float:left;
    width: 33.3%
}
.right {
    float:right;
    width: 33.3%;
    text-align: right;
}
.center{
    float: left;
    width: 33.3%;
    text-align: center;
}

DEMO

Edit in response to comment

If you want to include borders, you'll need to update the widths accordingly. CSS uses a box model in which total width is margin + border + padding + content (controlled by width property). Here is a DEMO that adds 1px borders to each div and updates the width accordingly.