title: Order of floated elements is reversed
body: <p>I want to achieve this layout:</p>
  
  <pre><code>********* 
  * Image *  Price | Add-to-cart-icon | Amount
  *********
  </code></pre>
  
  <p>But as you can see in <a href="https://jsfiddle.net/rn7wrynp/1/" rel="nofollow">this fiddle</a>, 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 <code>display: inline</code>?</p>
  
  <p>My HTML-Code:</p>
  
  <pre><code> &lt;div class="views-column"&gt;
    &lt;img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG"&gt;
    &lt;div class="feldgruppe"&gt;
      10,00 €
      &lt;form class="commerce-add-to-cart"&gt;
        &lt;div&gt;
          &lt;input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image"&gt;
          &lt;div class="form-item-quantity"&gt;
            &lt;label&gt;Anzahl &lt;/label&gt;
            &lt;input size="3"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="views-column"&gt;
    &lt;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"&gt;
    &lt;div class="feldgruppe"&gt;
      19,00 €
      &lt;form class="commerce-add-to-cart"&gt;
        &lt;div&gt;
          &lt;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"&gt;
          &lt;div class="form-item-quantity"&gt;
            &lt;label&gt;Anzahl &lt;/label&gt;
            &lt;input size="3"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>    .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;
  }
  </code></pre>