Dos elementos de bloque en línea, ancho 50% se ajustan a la segunda línea [duplicar]

Puede eliminar los espacios en blanco a través de css usando espacios en blanco para que pueda mantener su bonito diseño HTML. No olvides volver a poner el espacio en blanco a la normalidad si quieres que tu texto se ajuste dentro de las columnas.

Probado en IE9, Cromo 18, FF 12

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

NOTA: En 2016, probablemente pueda usar flexbox para resolver este problema más fácilmente.

Este método funciona correctamente IE7+ y todos los principales navegadores, se ha probado y probado en una serie de aplicaciones web basadas en viewport complejas.

<style>
    .container { 
    font-size:0}

    .column { 
    display: inline-block; 
    width: 50%; 
    font-size:1rem; /* IE9+ */
    }

    .ie7 .column {font-size:16px; display:inline; zoom:1}

    .ie8 .column {font-size:16px}

</style>

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

Demostración en Vivo: http://output.jsbin.com/sekeco/2

El único inconveniente de este método para IE7/8, es confiar en body {font-size:??px} como base para el tamaño de fuente basado en em/%.

Se podría servir CSS específico de IE7 / IE8 usando los comentarios condicionales de IE

inline y los elementos inline-block se ven afectados por los espacios en blanco en el HTML.

La forma más sencilla de solucionar el problema es eliminar el espacio en blanco entre </div> y <div id="col2">, véase: http://jsfiddle.net/XCDsu/15 /

Hay otras soluciones posibles, ver: bikeshedding CSS3 propiedad alternativa?

Continué teniendo este problema en ie7 cuando el navegador estaba en ciertos anchos. Resulta que los navegadores más antiguos redondean el valor del píxel hacia arriba si el resultado porcentual no es un número entero. Para resolver esto puede intentar establecer

overflow: hidden;

En el último elemento (o en todos ellos).