Dois elementos de bloco em linha, cada um com 50% de largura, não cabem lado a lado em uma única linha

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

O código acima está tentando colocar a div # esquerda e a div # direita, lado a lado, em uma única linha. Mas como você pode ver na URL do JSFiddle acima, esse não é o caso.

Consigo resolver o problema reduzindo a largura de um dos divs para 49%. Veja http://jsfiddle.net/mUKSC/ . Mas esta não é uma solução ideal porque uma pequena lacuna aparece entre os dois divs.

Outra maneira de resolver o problema é flutuando os dois divs. Veja http://jsfiddle.net/VptQm/ . Isso funciona bem.

Mas minha pergunta original permanece. Por que, quando ambos os divs são mantidos como elementos de bloco embutido, eles não cabem lado a lado?

Ao usar inline-blockelementos, sempre haverá um whitespace problema entre esses elementos (esse espaço tem cerca de 4 px de largura).

Então, seus dois divs, que têm 50% de largura, mais whitespace(~ 4px) têm mais de 100% de largura, e então quebram. Exemplo do seu problema:

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Existem algumas maneiras de corrigir isso:

1. Sem espaço entre esses elementos

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

2. Usando comentários HTML

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

3. Defina os pais font-sizecomo 0e, em seguida, adicione algum valor aos inline-blockelementos

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

4. Usando uma margem negativa entre eles ( não preferível )

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

5. Abaixando o ângulo de fechamento

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

6. Ignorando certas tags de fechamento HTML (obrigado @thirtydot pela referência )

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Referências:

1. Combatendo o espaço entre os elementos do bloco embutido em truques CSS
2. Remover espaços em branco entre elementos de bloco embutido por David Walsh
3. Como remover o espaço entre os elementos do bloco embutido?

Como disse @MarcosPérezGude , a melhor forma é usar e adicionar algum valor padrão na tag (como no HTML5Boilerplate ). Exemplo:remfont-sizehtml

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Atualização : como é quase 2018., use flexbox ou ainda melhor - layout de grade CSS .

boa resposta em css3 é:

white-space: nowrap;

no nó pai e:

white-space: normal;
vertical-align: top;

em div (ou outro) em 50%

exemplo: http://jsfiddle.net/YpTMh/19/

EDITAR:

existe outra maneira com:

font-size: 0;

para o nó pai e substituí-lo no nó filho

É porque o espaço em branco entre seus dois divs está sendo interpretado como um espaço. Se você colocar suas <div>tags em linha conforme mostrado abaixo, o problema será corrigido :

<div id="left"></div><div id="right"></div>

Porque existe um espaço entre os elementos. Se você remover todos os espaços em branco, eles se encaixarão .

<div id="left">Left</div><div id="right">Right</div>

Faça-os bloquear em vez de bloquear em linha. Isso fará com que os divs ignorem os espaços entre eles.

display:block;

ou remova o espaço entre as tags

<div id='left'></div><div id='right'></div>

ou adicionar

margin: -1en;

para um dos divs para reduzir o espaço ocupado por um único espaço renderizado.

Verifique o código abaixo:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Exemplo de Flexbox - isso seria usado para a classe pai que contém os dois elementos lado a lado.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Tirado da centralização vertical de um div dentro de outro div

Isso pode ser feito adicionando css display: inline ao div que contém os elementos inline.

Ao remover o espaço em branco usando margem com valor negativo, torna-se necessário adicioná-lo a este elemento específico. Como adicioná-lo a uma classe afetará os locais onde essa classe foi usada.

Portanto, seria mais seguro usar display: inline;

add float: left; para ambas as tags div.

div {
  float: left;
}