display products inline - special ID's required? - html

Question

I'm doing front end development for a project between some friends.
He is building the backed in rails and has templates that will generate the products and put the content in but I'm running into a situation where I'm not sure how to make them align properly?
This is a web based platform.
Here is the situation with the products. I have three for example. I created a product container that will hold them. I have the first one showing perfectly, then when I copy pasted another two (just to see them) they don't generate.
<div class="main-bkg">
<div class="card-row">
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/box.jpg"> </div>
<div class="product-name">prod1</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">box</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/circle.jpg"> </div>
<div class="product-name">prod2</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">circle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/tri.jpg"> </div>
<div class="product-name">prod3</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">triangle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
</div>
</div>
The css is build in SASS, and I'll post in that for easy reading. If you want the css export I can show it.
I assume they are overlapping. I'm not totally sure an easy work around this other then giving each product a special ID and then applying styling to it.
.main-bkg {
padding-top: 165px;
height: 100vh;
background-color: #ebf0f1;
.card-row {
padding-top: 15px;
padding-bottom: 15px;
.product-cont {
padding-left: 30px;
padding-right: 30px;
.product-holder {
background-color: white;
height: 350px;
width: 200px;
border-radius: 20x;
.product-img {
img {
display: block;
height: 240px;
width: 170px;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
}
}
.product-name {
text-align: center;
}
.product-info {
display: block;
height: 30px;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
font-weight: 700;
.product-price {
display: inline-block;
text-align: center;
float: left;
}
.sep {
display: inline-block;
text-align: center;
}
.product-desc {
display: inline-block;
text-align: center;
float: right;
}
}
.product-qty {
display: block;
border-radius: 3px;
border: 1px solid $prime-color;
margin-left: auto;
margin-right: auto;
width: 100px;
.qty-sub {
color: $prime-color;
display: inline-block;
float: left;
width: 30px;
height: 25px;
text-align: center;
}
.qty-amount {
display: inline-block;
color: $prime-color;
font-size: 20px;
text-align: center;
width: 40px;
height: 25px;
}
.qty-add {
color: $prime-color;
display: inline-block;
text-align: center;
float: right;
width: 30px;
height: 25px;
}
}
}
}
}
}

Answer 1

Have you tried to put a float:left in the container to let the container float?
.product-cont {
padding-left: 30px;
padding-right: 30px;
float: left;
}
Check if this Codepen with SASS ready solves your problem