Why “Inline-block” doesn't work properly in this CSS?

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.e         


        

Answer 1

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)