child div are coming below each other even after using inline-block

Question

I have a div with has 100% as it's width. I want to place 3 more div inside it next to each other with same height as parent's height.

But due to some unknown issues I am not able to place it next to each other.

It's is flowing as display:block even through I have given display:inline-block.

What am I doing wrong here?

JSFiddle Code

Answer 1

It's is flowing as display:block even through I have given display:inline-block.

There are a couple of things you can do. Either float each element, you want on the same line, to the left or add display:inline-block;.

Just noticed that you have given display:inline-block; to the parent element not to the child elements. This is why it wasn't working for you.

Float left: https://jsfiddle.net/25brcg9x/1/

Display inline-block: https://jsfiddle.net/beekvang/25brcg9x/2/