Why width 50% inline-blocks don't display side-by-side

So here’s the thing that’s always confused me about display: inline-block. Let’s say you have two subsequent inline-block elements. If the container has no padding, and the elements have no margin or border, and if you set both those elements to width: 50% then they should appear side-by side, right?

inline-block is not side-by-side

I’ll assure you that the previous paragraph’s logic checks out. So what is going on then? Why do these elements appear on different lines? I’ve wondered this for years always just setting width: 48% and chalking it all up to an inconsistency in my understanding of how css layouts work.

Finally, with some help from StackOverflow I’ve got it. And as wierd as it is, it makes sense!

The clue is in that white-space between the red and blue box. There’s no margins nor borders, so where does this white stripe come from? Well it’s right there, in the html. Do you see it? If not consider this bit of html

Two lines of text

why is the output one two instead of onetwo? Well…because the words are on different lines, and a line-break in html between two inline elements inserts a white-space.

Ohhh…and we’ve got inline-block containers which act as inline…which inserts a white-space…so now our width total is 50% + whitespace + 50% which is of course greater than 100% and we get the second container wrapping to the next line!

So what’s the solution? Well, to start with, simply get rid of that whitespace:

Side-by-side with no whitespace

And voila! If we still want to stack the html we can do something like

<div class="half left"></div><!--
--><div class="half right"></div>

It’s not pretty but it works.

So there we go. A css mystery solved!