How to enlarge a div without moving other elements

Question

How can I stop this div to move all elements below where you select certain price?

To see what I am talking about please look at this link: Check the price table sty

Answer 1

See the corrected css rule below.

div.tsc_pricingtable03 div.column_1:hover, 
div.tsc_pricingtable03 div.column_2:hover, 
div.tsc_pricingtable03 div.column_3:hover, 
div.tsc_pricingtable03 div.column_4:hover {

position: relative;
z-index: 100;
left: -5px;
top: -15px;
box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5);
margin-bottom: -30px; /// Note the added removal of the bottom margin that all "non" active elements have
}

This is needed because you are giving the wrapper a 100% height so it will ALWAYS maintain that 24px padding. However, to keep the :hover element from changing the height of the wrapper you need to have that element specifically remove all the padding added by the wrapper to effectively ignore it.

Answer 2

You can also consider using the CSS transform property, a technique that is also used in your fourth table. For example:

.some_table .some-table-column:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

CSS transforms are ideal for this, as they "allow to change the position of the affected content without disrupting the normal flow".