Why "Inline-block" doesn't work properly in this CSS? - html

Question

Please check the CSS below.
/*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}
div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
The result in browser:
What I need:

Answer 1

This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.
<div class="rex">
<div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>
working demo
It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.
Refer to here for a more in depth explanation of why this occurs.
How to remove the space between inline-block elements?

Answer 2

Just extending answer giving by #Tristan here.
You have repeated the css code unnecessarily. You can minify it by using multiple css like :
.ex, .ex2, .ex3 {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
height: 100%; /* no need of height: 200px; here */
} /* if you need to extend it to parent height */
/* then use height: 100% */
OR
div.rex > div { /* code here */ }
You can keep elements side by side by using any of the below approaches:
Using display: table-cell
Using float: left
Using display: inline-block (check #Tristan's solution)

Answer 3

Add float:left; to your div.ex, div.ex2 and div.ex3 instead.
JSFIDDLE
UPDATE:
Add position:absolute to second and third div if float is not a choice.
FIDDLE
UPDATE 2:
Add this to only 3rd div if you need that space in between.
FIDDLE

Answer 4

You can sue comments like that (this looks little better in code):
<div class="rex">
<div class="ex"><!--
--></div><div class="ex2"></div><!--
--><div class="ex3"></div>
</div>

Answer 5

My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other.
.rex{
display:block;
font-size:0;
}
.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}
.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}