50% inline-blocks not displaying next to each other

Question

Say I have

<span class="ib-half"></span>
<span class="ib-half"></span>

and

.ib-half {
    display: inline-block;
    width: 50%;
}

I expect the two spans to display side-by-side but they won't. There's no margin, padding, or border, so what's the problem?

Answer 1

Setting the font-size of the parent element to zero may be a fix.

HTML :

<div class = "parent">
    <span class="ib-half">Left</span>
    <span class="ib-half">Right</span>
</div>

CSS:

span{
    background:#bdbdbd;
}

.ib-half {
    display: inline-block;
    width: 50%;
    font-size:10px;
}

.parent {
    font-size: 0;
}

Check this fiddle. http://jsfiddle.net/YpTMh/9/

For more options please refer to http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

The actual problem is the space (newline) between the two elements. Because it's an inline-block element, it registers the space, so it's 50% + the space.

Some possibilities:

<span class='left'>Left</span><!--
--><span class='right'>Right</span>

or <span class='left'>Left</span><span class='right'>Right</span>

or

<span class='left'>Left</span><span
class='right'>Right</span>

or to me it really probably makes the most sense to float: left; and change it to a display: block element. I believe the nature of inline elements is to operate in the same manner as text with some extra spacial information, so why get hacky when there's no reason to?

Answer 3

good answer in css3 is:

white-space: nowrap;

in parent node, and :

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

in div (or other) at 50%

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