'How to enlarge a div without moving other elements
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 style 3 below that you can see that when you select certain price table all of the elements below are moving because of the pop-out. I want to be able to use this feature but of course without moving all of the elements below.
How can I do that?
Here is the link to a Javascript:JS
EDIT:
I am posting relevant HTML:
<!-- DC Pricing Tables:3 Start -->
<div class="tsc_pricingtable03 tsc_pt3_style1">
<div class="caption_column">
<ul>
<li class="header_row_1 align_center radius5_topleft"></li>
<li class="header_row_2">
<h2 class="caption">Choose plan</h2>
</li>
<li class="row_style_4"><span>Web Space</span></li>
<li class="row_style_2"><span>Bandwidth</span></li>
<li class="row_style_4"><span>E-mail accounts</span></li>
<li class="row_style_2"><span>MySQL databases</span></li>
<li class="row_style_4"><span><a href="#" class="tooltip" rel="Web-based control panel system">CPANEL</a></span></li>
<li class="row_style_2"><span><a href="#" class="tooltip" rel="24/7 Support via Phone, Email, Web.">24/7 Support</a></span></li>
<li class="footer_row"></li>
</ul>
</div>
<div class="column_1">
<ul>
<li class="header_row_1 align_center">
<h2 class="col1">starter</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col1">$<span>5</span></h1>
<h3 class="col1">per month</h3>
</li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10GB</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">1</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1</a></span></li>
<li class="row_style_3 align_center"><span class="pricing_no"></span></li>
<li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
<div class="column_2">
<ul>
<li class="header_row_1 align_center">
<h2 class="col2">basic</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col2">$<span>10</span></h1>
<h3 class="col2">per month</h3>
</li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">30GB</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">200GB</a></span></li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">10</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10</a></span></li>
<li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
<li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
<div class="column_3">
<ul>
<li class="header_row_1 align_center">
<h2 class="col3">pro</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col3">$<span>29</span></h1>
<h3 class="col3">per month</h3>
</li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">500GB</a></span></li>
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">50</a></span></li>
<li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">50</a></span></li>
<li class="row_style_3 align_center"><span class="pricing_yes"></span></li>
<li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
<div class="column_4">
<ul>
<li class="header_row_1 align_center radius5_topright">
<h2 class="col4">biz</h2>
</li>
<li class="header_row_2 align_center">
<h1 class="col4">$<span>39</span></h1>
<h3 class="col4">per month</h3>
</li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1000GB</a></span></li>
<li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">Unlimited</a></span></li>
<li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
<li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
<li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
<li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
</ul>
</div>
</div>
<!-- DC Pricing Tables:3 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->
And the CSS:
div.tsc_pricingtable03 div.column_1,
div.tsc_pricingtable03 div.column_2,
div.tsc_pricingtable03 div.column_3,
div.tsc_pricingtable03 div.column_4 { /* transitions */ -webkit-transition:box-shadow 0.1s ease; -moz-transition:box-shadow 0.1s ease; -o-transition:box-shadow 0.1s ease; -ms-transition:box-shadow 0.1s ease; transition:box-shadow 0.1s ease;}
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; /* shadow */ 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);}
Solution 1:[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.
Solution 2:[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 {
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".
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Roberto Rossini |
| Solution 2 |