CODEWITHSUNDEEP
htmlcsscss-float
Madamadam
Madamadam

Reputation: 938

Order of floated elements is reversed

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;
}

Upvotes: 0

Views: 85

Answers (1)

Stickers
Stickers

Reputation: 78686

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>

Upvotes: 1

Related Questions