Flutuando dois divs de largura de 50% com uma margem de 10px entre
Eu quero flutuar um par de divs fluidos em toda a minha página, cada um ocupando metade da largura do seu contêiner, mas com uma margem de 10px entre eles. Eu fiz este JSFiddlehttp://jsfiddle.net/andfinally/sa53B/5/e aqui está o HTML:
<div class="clearfix">
<a class="prev" href="#">Previous</a>
<a class="next" href="#">Next</a>
</div>
E 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;
}
A regra de dimensionamento de caixa não é suficiente para fazer isso funcionar - os divs têm mais de 50% de largura. Em uma das respostas paraessa questão alguém sugeriu usar a tabela de exibição do CSS. Alguém pode explicar como fazer esse trabalho nesta situação?
Obrigado!