display text and button in proper positions using css - html

Question

visit link1 , Its fine. But visit link2 Some problems are there
1)in 2nd link, there is huge gap b/w Rs 25 & "Selling Price + Rs 10 Delivery", Add to cart & buy now button.
2)Also only text "off" is visible, "50" went inside the "check delivery availability" box. 50 & off should visible
we are using this code :
.wk_mp_design .sell_price { display: none;}
.wk_mp_design .label.yousave_label {display: none;}
.wk_mp_design .old-price .price {color: #a0a0a0;font-size: 12px;font-weight: bold;}
.wk_mp_design .you_save_price {color: green;font-size: 11px;font-weight: bold;}
.wk_mp_design .you_save_price::after {content: "OFF";}
.wk_mp_design .special-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .regular-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .special-price {border-top: 1px dotted #ccc;clear: both;}
.wk_mp_design .You_savee {float: right;position: relative;top: -49px;}
.wk_mp_design .You_savee .special-price.yousave {border: medium none;}
.wk_mp_design .desc.std {border-top: 1px dotted #ccc;}
.wk_mp_design .mrp {display: none;}

Answer 1

1> height is the issue; use this
.product-view .product-essential .product-shop .price-box {
padding-bottom: 0 !important;
height: 75px;
}
2> top value is the issue; use this
.Quick .You_savee {
border: 1px solid #ccc;
border-radius: 37px;
color: green;
left: 151px;
padding: 0;
position: relative !important;
top: -70px !important;
width: 49px;
}
if above classes are used in multiple places just override these classes

Answer 2

1) Caused because of
<p class="special-price">
p elements 's margin-top
.Quick .special-price {
margin-bottom: 0px !important;
margin-top: 20px !important;
}
also notice the height in
.product-shop .price-box {
padding-bottom: 0px !important;
height: 100px;
}
aswell.
2) I don't really understand what you mean.

Answer 3

This is the relevant markup for the first site:
<div class="Quick_1">
<div class="product-data">
<div class="widget widget-static-block"></div>
<div class="price-box">
<p class="old-price">…</p>
<p class="special-price">…</p>
<p class="sell_price">…</p>
<p></p>
<div class="You_savee">…</div>
</div>
<div class="widget widget-static-block"></div>
</div>
<div class="add-to-box">…</div>
</div>
And this is the same part on the second site:
<div class="Quick_1">
<div class="product-data">
<div class="widget widget-static-block"></div>
<div class="price-box">
<p class="old-price">…</p>
<p class="special-price">…</p>
<div class="You_savee">…</div>
</div>
<div class="widget widget-static-block"></div>
</div>
<p class="sell_price">…</p>
<div class="add-to-box">…</div>
</div>
If you look closely, the sell_price element is outside of the product-data element in the second link which causes this problem. If you move it inside, above the You_savee within the price-box, then it will render as desired.