Paul Kent

.NET Developer (AngularJS, jQuery, C#, Dependency Injection, Unit Testing, Onion Architecture, Azure Cloud)

CSS Puzzler: Why do these inner divs not display on the same line?

In the HTML and CSS snippet below we have two divs with a class called "inner". Both these divs are set to display:inline-block; and hence they should display next to each other and not on top of each other. So why do they display on top of each other?

Note: box-sizing is set to border-box. Both inner divs are exactly 200px even with the 1px border and their parent is exactly 400px.

Answer?

See this post on StackOverflow. Thanks to everyone who contributed.