Dan Milon Dan Milon - 1 month ago 11
CSS Question

css - two inline-block, width 50% elements don't stack

I would like to have two columns of 50% width space, and avoid floats.
So i thought using

display:inline-block
.

When the elements add to 99% width (eg 50%, 49%, http://jsfiddle.net/XCDsu/2/ ) it works as expected.

When using 100% width (eg 50%, 50%, http://jsfiddle.net/XCDsu/3/ ) the second column breaks to the second line.

Why is that?

Answer

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>