html – Unable to set CSS style for div


I am very new to CSS and was unable to figure out how to place all the contents inside my div at the same level. I am facing an issue while trying to set the actual price value (striked off) next to the discounted price in the card. It’s getting placed under the tag which I don’t want. Any suggestion on how to improve my CSS logic? Thanks.

actual price appearing below tag

My HTML code:

<div class="container" id="products">
  <mat-card
    class="product-content"
    *ngFor="let product of products"
    id="product-content">
    <mat-card-header>
      <mat-card-title (click)="navigate()">{{ product.name }}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div>
        <div id="tag">{{ product.tags }}</div>
        <div id="category">{{ product.category }}</div>
        <div id="wishlist" (click)="addToWishList(product)">
          <i
            [ngStyle]="{ color: product.isInWishList ? 'yellow' : '' }"
            class="fa fa-star-o fa-2x"
            aria-hidden="true"
          ></i>
        </div>
        <div id="discounted-price">Rs. {{ getDiscountedPrice(product) }}/-</div>
        <div
          id="actual-price"
          *ngIf="product.discountedPerc === 0; else displayOriginalPrice">-</div>
        <ng-template id="displayOriginalPrice" #displayOriginalPrice>{{
          product.actualPrice
        }}</ng-template>
        <div id="add-to-cart">ADD TO CART</div>
      </div>
    </mat-card-content>
  </mat-card>
</div>

My CSS file:

#products {
  padding-top: 3%;
  display:fixed;
  position: inherit;
  margin: 0 auto 0 auto;  
}
#product-content {
  margin-bottom: 5%;
  padding-bottom: 2%;
}
.mat-card-title {
  cursor:pointer;
  white-space: pre-line;
}
#tag {
  float: left;
  position: relative;
  margin-left: 1%;
  width: 6rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: darkorange;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#category {
  float:left;
  position: relative;
  margin-left: 25%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#wishlist {
  float:left;
  position: relative;
  margin-left: 35%;
  margin-top: -3%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  width: 2rem;
  cursor: pointer;
}
#discounted-price{
  float:left;
  position: relative;
  margin-left: 43%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#discounted-price {
  float:left;
  position: relative;
  margin-left: 57%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#displayOriginalPrice {
  float:left;
  position: relative;
  margin-left: 60%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#add-to-cart{
  float:left;
  position: relative;
  margin-top: -3.1%;
  margin-left: 65%;
  padding-top: 0.5%;
  width: 8rem;
  height: 2rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align:center;
  background-color: darkorange;
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
}



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here