Floating two 50% width divs with a 10px margin between

Question

I want to float a pair of fluid divs across my page, each taking up half of their container's width, but with a margin of 10px between them. I've done this JSFiddle http://jsfiddle.net/andfinally/sa53B/5/, and here's the HTML:

<div class="clearfix">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
</div>

And CSS:

.prev {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-right: 5px;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 50%;
    margin-left: 5px;
}

The box-sizing rule isn't enough to make this work - the divs are more than 50% wide. In one of the answers to this question somebody suggested using CSS display-table. Can anyone explain how to make that work in this situation?

Thanks!

Answer 1

You can either a) lower 50% to 48% and make the margin 2% or b) use CSS3 calc, which is not supported everywhere, but should be an option in the near future. (Specifically, when IE8 is off the table) (See http://caniuse.com/#feat=calc for compatability)

Example using percentages: http://jsfiddle.net/sa53B/9/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

Example using calc: http://jsfiddle.net/sa53B/6/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px);
    margin: 0 5px 10px 0;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    margin: 0 0 10px 5px;
}