CODEWITHSUNDEEP
cssflexboxcss-grid
NoDachi
NoDachi

Reputation: 944

Changing position of items using only CSS

I am stuck with having to use the HTML markup provided and cannot change it. What I am trying to do is to have the regular price displaying on the left underneath "SALE" i.e:

SALE $5

$10

Is there a way around doing this? I could absolutely position the regular price to the left but was hoping to do a more eloquent solution if one exists?

.label {
  float: left;
  margin: 0 5px 0 0;
}

.special-price,
.label {
  color: red;
}

.price {
  display: flex;
  flex-direction: column-reverse;
}
<div class="wrapper">
  <div class="label">
    <!-- Label text can vary i.e. sale, discontinued etc -->
    SALE
  </div>

  <div class="price">
    <div class="regular-price">
      $10
    </div>

    <div class="special-price">
      $5
    </div>
  </div>
</div>

https://jsfiddle.net/3av0zmfc/

Upvotes: 0

Views: 67

Answers (3)

Heretic Monkey
Heretic Monkey

Reputation: 12114

You can use CSS Grid to get the outcome you want. Note the display: contents on the .price class was added so that the div wouldn't interfere with the grid placement; it basically makes the div disappear in terms of CSS placement.

This code probably won't work in any but the latest modern browsers.

.wrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-gap: 5px 5px;
  width: min-content;
}

.label {
  grid-column: 1/2;
  grid-row: 1/2;
}

.special-price,
.label {
  color: red;
}

.price { display: contents; }

.special-price {
  grid-column: 2/3;
  grid-row: 1/2;
}

.regular-price {
  grid-column: 1/2;
  grid-row: 2/3;
}
<div class="wrapper">
  <div class="label">
    <!-- Label text can vary i.e. sale, discontinued etc -->
    SALE
  </div>

  <div class="price">
    <div class="regular-price">
      $10
    </div>

    <div class="special-price">
      $5
    </div>
  </div>
</div>

Upvotes: 1

BlankCoder
BlankCoder

Reputation: 81

so i played around with your code and this is what I came up with.

         <div class="wrapper">
   <div class="label">
   <!-- Label text can vary i.e. sale, discontinued etc -->
     SALE
   </div>

     <div class="special-price">
      $5
     </div>

   <div class="price">
     <div class="regular-price">
       $10
     </div>


   </div>
 </div>

see how i have swapped the 5 and 10 around, that's where the problem came in. Because it was the wrong way round, the css was going crazy. I also added a line of code into css "align: left" , so now it's working.

        .label {
  float: left;
  margin: 0 5px 0 0;
}

.special-price,
.label {
  color: red;
}

.price {
  display: flex;
  flex-direction: column-reverse;
  text-align: left;
}

Upvotes: 0

Ishita Ray
Ishita Ray

Reputation: 666

Please have a look...

.price {
    display: flex;
}
.special-price {
    margin: -18px 0 0 24px;
}
.label, .special-price {
  color: red;
}
<div class="wrapper">
    <div class="label">
      <!-- Label text can vary i.e. sale, discontinued etc -->
      SALE
    </div>

    <div class="price">
      <div class="regular-price">
        $10
      </div>

      <div class="special-price">
        $5
      </div>
    </div>
  </div>

Upvotes: 0

Related Questions