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

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

Answer 2

Margin will add to your containers width. If you are using a width that is based on a percentage you should set your margin value a percentage as well.
For example, if you want two 50% divs. You need to account for the margin too. In order to do so, you need to subtract the margin from the total width. If you want 1% margin left and right, thats a total of 2% you need to remove from the total width.
div {
float: left;
width: 48%;
margin: 0 1%;
}
your updated fiddle: http://jsfiddle.net/sa53B/8/

Answer 3

Recently in my task i need two float columns with 8px fixed margin between them.
So, i used border and box-sizing properties without any calc magic.
So, the solition is:
.wrapper__col {
width: 50%;
box-sizing: border-box; // used to change box-model
overfow: hidden; // clearfix hack
}
.wrapper__col:nth-child(odd) {
float: left;
border-left: 4px solid transparent;
}
.wrapper__col:nth-child(even) {
float: right;
border-right: 4px solid transparent;
}
<div class="wrapper">
<div class="wrapper__col">1</div>
<div class="wrapper__col">2</div>
</div>
So, that's all ;)

Answer 4

It's late but someone might be interested in this way to fix :
Wrap the elements you wish to display in columns with divs :
<div class="left"><a ....></a></div>
<div class="right"><a ....></a></div>
And just set those styles :
.left {
float:left;
width:50%;
}
.right {
float:right;
width:50%;
}
Whatever the margin of divs contents it won't affect the 50% width.
I used to proceed this way before hearing of usefull css calc.
See JSFiddle

Answer 5

What you are trying to do does not work with fixed margins. You need to calculate using percentage margins.
Box sizing only affects padding and border space, not margin space. So 50% + 50% =100% +5px+5px > 100%.
Use % margins and your problem is solved.

Answer 6

Here's how I do it, but it uses variable gap between:
css:
.left {
float:left;
width:59%;
margin-right: 1%;
background-color:red;
}
.right {
float:left;
width:39%;
margin-left: 1%;
background-color:blue;
}
html:
<div>
<div class="left">left</div>
<div class="right">right</div>
</div>
jsfiddle:
http://jsfiddle.net/gkmjLfgx/

Answer 7

Sometimes you want the same 10px spacing horizontally and vertically and still have equally sized columns.
You can do this by adding a "border-left: 10px solid white" to an extra DIV inside each column and add a "margin-left: -10px" to the columns container to eat up the border of the left column.
fiddle 128psahu