Float right/left makes elements hidden - css

Question

For some reason when I am adding float right/left to my elements it displays them behind the image element on the next line.
Here is the actual live page:
http://www.dealerbyte.co.uk/used-cars.php
Here is the code:
HTML
<div class="col-md-8 col-sm-8 col-lg-8">
<div class="listing-container">
<h3 class="model-listing-title">2011 (11) Mercedes-Benz C Class C250 CDI BlueEFFICIENCY Sport 4dr Auto</h3>
<h3 class="price-listing">£17,998</h3>
</div>
<div class="listing-container-spec">
<img src="media/img/mercedes-test.jpg" alt="mercedes-benz"/>
</div>
</div>
CSS
.listing-container {
background-color:#dddddd;
padding:0;
border-radius:6px 6px 0 0;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 5px #000000;
padding:1px 10px;
}
.listing-container-spec {
background-color:#153066;
width:100%;
height:auto;
display:block;
position:relative;
}
.listing-container-spec img {
width:60%;
}
.model-listing-title {
font: 600 2em 'Open Sans', sans-serif;
margin-top:0.1em;
display:block;
position:absolute;
float:left;
}
.price-listing {
font: 600 2em 'Open Sans', sans-serif;
margin-top:0.1em;
float:right;
display:block;
position:absolute;
}
If you view the live example you will notice if you inspect element that the elements are sat behind the image, when the float is disabled it displays okay but I want the price class to float right.
How can I stop this?

Answer 1

Add overflow:auto to .listing-container and remove position:absolute; from .price-listing.

Answer 2

Remove position: absolute; from .model-listing-title and .price-listing and you have to clear the floating elements. You can do it by adding overflow: auto; to .listing-container but it may cause some trouble with elements that overflow and you really want to make them appear. The best way to do this is to add the class clearfix to it and define it in your CSS file. You can always use this class to clear floating elements by adding this class to the container of floating elements.
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}

Answer 3

Since you're using bootstrap, you don't need to float anything, just do this:
<div class="col-md-8 col-sm-8 col-lg-8">
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6">
<div class="listing-container">
<h3 class="model-listing-title">2011 (11) Mercedes-Benz C Class C250 CDI BlueEFFICIENCY Sport 4dr Auto</h3>
<h3 class="price-listing">£17,998</h3>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<div class="listing-container-spec">
<img src="media/img/mercedes-test.jpg" alt="mercedes-benz" />
</div>
</div>
</div>
</div>
if you want the car on left, just change the order of the divs. You may want different columns sizes, so adjust at will
and voilá, perfect responsive layout without dealing with floats