Placement of 2 50% of the input elements of the width in a row, understanding the size of the window

Question

I am trying to place 2 input inline elements with 50% width of each. Why do I have to subtract the border width from 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 with inline-block .

display:inline-block tells the browser to treat the element as a block in relation to its contents, but as an inline element in relation to its environment.

The problem for you here is that the surrounding around the two elements contain some empty space. In particular, you have a space between the two elements. White space matters for inline elements as well as inline-block elements.

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

As a result, you will get 50% width + width of one space character + 50% width .

This is a well known issue with inline-block , but travels a lot.

A quick + dirty solution, therefore, should remove the space - close the gap between the end of the <select> and the beginning of the <input> so that there is no space.

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

Alternatively, you can discard the built-in blocks. There are a number of other options that can achieve the same or similar results - in particular, float , display:table-cell and flex-box , but there are others.

But my suggestion is only to remove the spaces between these two elements. Quick and easy fix.

Answer 2

Two questions:

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

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

Solution: Add prefix properties and remove the space from the markup.

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

Answer 3

Indicates

 float:left 

And he corrects it.

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