CSS HTML Floating issue with div's

Question

I'm running into some issues with HTML / CSS. I want to float a number off divs after each other. But the last div in line doesn't float how I want it. It's a litte difficult to explain so I placed my code on JSFiddle:

In basic, my HTML looks like this:

<ul>
  <li>
    <div class="product-image"></div>
    <div class="product-title"></div>
    <div class="product-description"></div>
    <div class="product-spec"></div>
    <div class="product-offer"></div>
  </li>
</ul>

Full example including CSS: http://jsfiddle.net/6r46B/

Below an image with these div's and how I want them to align:

The issue here is that the div .product-offer is floating right of the div .product-spec. But I want it all the way up. How would I do that?

PS: This part will be used in a responsive design. This will be the wide example.

Answer 1

Make product-offer the first element in the order of your DIVs to take precedence in the float-order.