Why is this inline-block element pushed downward?

Question

Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner wo

Answer 1

Try making all CSS properties of all Elements same.

I had similar problem and while fixing this I identified that I was dropping an Element with Font property into Div Element.

After dropping that Element with Font property the alignment of all DIV was disturbed. To fix this I set Font property to all DIV elements the same as the element that is dropped into it.

In the following example, the Dropped element of class ".dldCuboidButton" defined with font-size:30 px.

So I added same property to remaining classes i.e. .cuboidRecycle, .liCollect , .dldCollect which are used by DIV elements. In that way all DIV element follow the same Measurments before and after dropping the element into it.

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

Here is the example of HTML dynamically created using above CSS.

$("div#tabs").append(
  "
#" + uniqueId + 
  "" + 
  "" + 
  "
 Trash bin 
" +
  "
Drop Template Manifest Cuboid here
" +
  "
Drop Template Cuboids here..
" +
  "
" 
);