How to remove extra space from position relative? - css

Question

I have used position:relative to move the priceholder div above its initial position, now when I put another div below it which is the description div (you can check it on my jsfiddle), you can see that the priceholder div still occupies the area of its initial position.
My question is how do I remove this extra space? I do not want to use another position relative on my description div to fix it because it messes up my layout.
<div class="frame">
<div class="imageholder"><img src="http://i.imgur.com/daiSXVG.jpg"/></div>
<div class="priceholder"><p>$ 456</p></div>
<div class="description">This is a test description.</div>
</div>
Here is my jsfiddle: http://jsfiddle.net/MarkTe/g6zs8qhx/2/

Answer 1

I redid your structure a bit, removing some (unnecessary elements)
body {
margin-top: 50px;
}
.frame {
margin: 0 auto;
padding: 6px;
background: #fedd02;
border-radius: 6px;
width: 200px;
height: 150px;
}
.frame img {
max-width: 100%;
}
.priceholder {
border: 1px solid black;
border-radius: 50%;
width: 74px;
height: 74px;
position: absolute;
box-sizing: border-box;
margin-left: -37px;
margin-top: -43px;
padding: 10px 0 0 10px;
}
<div class="frame">
<p class="priceholder">$ 456</p>
<img src="http://i.imgur.com/daiSXVG.jpg" />
<p>This is a test description.</p>
</div>
Or see the updated Fiddle.
EDIT
To add this in a loop you could use something like this:
<?php
while( ...statement... ) {
echo '<div class="frame">';
echo ' <p class="priceholder">$ 456</p>';
echo ' <img src="http://i.imgur.com/daiSXVG.jpg" />';
echo ' <p>This is a test description.</p>';
echo '</div>';
}
?>