css change size affects by moving rest of the divs

Question

Please if someone can help me solving the problem that grey box, when hovered, affects the yellow and the red boxes by moving them further down. I don't want that to happen, only the gray box to change its size.

Here is the code:

HTML

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>

CSS

.st {
    height: 100px;
    width: 100px;
    background-color:gray;
}
.st:hover {
    height: 110px;
}
.sot {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:yellow;
}
.sots {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:red;
}

http://jsfiddle.net/khqxd0mr/1/

Thank you for any solution, CP

Answer 1

Add margin-bottom: -10px to .st:hover You are hacking the CSS box model to retain the position. -10px is relative to the extended height 110px.

Updated JSfiddle

.st {
  height: 100px;
  width: 100px;
  background-color: gray;
}
.st:hover {
  height: 110px;
  margin-bottom: -10px;
}
.sot {
  margin-top: 2%;
  height: 100px;
  width: 100px;
  background-color: yellow;
 
}
.sots {
  margin-top: 2%;
  height: 100px;
  width: 100px;
  background-color: red;
 
}

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>