Placing 2 50% width input elements in a row, understanding box-sizing

Question

I'm trying to place 2 input elements inline with 50% width each. Why do I have to subtract the border width from the input elements even when I use box-sizing: border-box?

http://jsfiddle.net/Nmvk6/

HTML

<form class="form">
    <div class="form-group">
        <label>Type</label>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-plus-sign"></span>
        </button>
    </div>
    <div class="form-group">
        <select class="form-control half-width-form-control">
            <option value="foo">foo</option>
            <option value="bar">bar</option>
        </select>
        <input class="form-control half-width-form-control" type="number"></input>
    </div>
</form>

CSS

.half-width-form-control {
   display: inline-block;
    width: calc(50% - 2px);
    /*width: 50%;*/
    /*box-sizing: border-box;*/
}

Answer 1

The problem you have here is related to inline-block.

display:inline-block tells the browser to treat the element as a block with regard to its contents, but as an inline element with regard to its surroundings.

The problem for you here is that the surrounding around the two elements includes some white space. Specifically, you have some white space between the two elements. White space is relevant for inline elements, and thus also for inline-block elements.

In a nutshell, it's as if the two elements were words in a sentence. The white space between them is seen as the space between two words.

What you end up with is 50% width + width of one space character + 50% width.

This is a well-known issue with inline-block, but does trip people up a lot.

The quick+dirty solution is therefore to remove the space -- close up the gap between the end of the <select> and the begining of the <input> so that there is no space there.

Other alternatives include using comments to remove the gap (ugly), styling the container element to font-size:0px;, and various other hacky solutions.

Alternatively, you could throw away the inline-blocks. There are a number of other options which can achieve the same or similar results -- notably float, display:table-cell, and flex-box, but others also exist.

But my suggestion is just to remove the spaces between the two elements. Quick, easy fix.

Answer 2

Two issues:

1. You need -webkit-box-sizing and -moz-box-sizing if you want to make it work on all current browsers. See MDN page.

2. There was a space (actually a return and some spaces, but they collapse to 1 space) between the two controls, so the total width was 100% plus the space.

Solution: add the prefixed properties and remove the space from the markup.

http://jsfiddle.net/Nmvk6/7/

Answer 3

Specify

float:left

And it fixes it.

http://jsfiddle.net/Nmvk6/8/