Order of floated elements is reversed - html

Question

I want to achieve this layout:
*********
* Image * Price | Add-to-cart-icon | Amount
*********
But as you can see in this fiddle, the order of "Price | Add-to-cart-icon | Amount" is "Add-to-cart-icon | Amount | Price". Why is this happening and how can I achieve the pursued layout?
Maybe it is better to align elements by using display: inline?
My HTML-Code:
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
<div class="feldgruppe">
10,00 €
<form class="commerce-add-to-cart">
<div>
<input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
<div class="feldgruppe">
19,00 €
<form class="commerce-add-to-cart">
<div>
<input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
My CSS:
.views-column {
position: relative;
clear: both;
padding-top: 1em;
}
.views-column img {
float: left;
max-width: 35%;
height: auto;
padding-right: 1em;
}
.feldgruppe,
.commerce-add-to-cart {
float: left;
}
input.form-submit {
float: left;
max-width: 30px;
}
.form-item-quantity {
float: left;
}

Answer 1

If you want to use float for all, you should wrap the price text into a div or span and float it to the left too. But I suggest to use inline blocks instead of float, so less CSS is needed.
.views-column img {
max-width: 35%;
height: auto;
padding-right: 1em;
}
.views-column div,
.views-column form {
display: inline-block;
vertical-align: top;
}
input.form-submit {
max-width: 30px;
}
jsFiddle
.views-column {
position: relative;
clear: both;
padding-top: 1em;
/* white-space: nowrap; */
}
.views-column img {
max-width: 35%;
height: auto;
padding-right: 1em;
}
.views-column div,
.views-column form {
display: inline-block;
vertical-align: top;
}
input.form-submit {
max-width: 30px;
}
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
<div class="feldgruppe">
10,00 €
<form class="commerce-add-to-cart">
<div>
<input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
<div class="feldgruppe">
19,00 €
<form class="commerce-add-to-cart">
<div>
<input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>