Я хочу разместить на своей странице пару разделителей жидкости, каждая из которых занимает половину ширины их контейнера, но с полем между ними 10px. Я сделал это JSFiddlehttp://jsfiddle.net/andfinally/sa53B/5/и вот HTML:

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

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

Для этого не достаточно правила определения размера ящика - ширина div составляет более 50%. В одном из ответов наэтот вопрос кто-то предложил использовать CSS display-table. Кто-нибудь может объяснить, как заставить это работать в этой ситуации?

Спасибо!