What is the best way to align product cards side by side instead of stacking them on separate lines?

Question

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lies in creating multiple cards that can be positioned side by side. Whenever I paste the same template again, it results in the card being displayed on a separate line rather than next to the first one.

My attempts involving float:left and additional copying and pasting of the template haven't yielded the desired outcome. The second card consistently ends up beneath the first one instead of beside it. I'm unsure of how to proceed with placing them adjacently. While I understand the concept of floating elements next to each other, I seem unable to apply it to this particular situation. Any advice or guidance would be greatly appreciated.

The Code I Copied:

<!DOCTYPE html>
<html>
... (template code)
</body>

My Personalized Version:

<!doctype html>
<html>
<head>
... (customizations)
</body>

Thank you for your help!

html css

Answer 1

Answer №1

To make your cards display in a row, you'll need to nest them inside a div with the property set to display: flex;

In your HTML:

<div class="wrapper">
    <div class="card">
        <img src="collar.png" alt="Denim Jeans" style="width:100%">
        <p class="productName">Leather Collar</p>
        <p class="price">$<strike>9.99</strike></p>
        <p class="newPrice">2.99</p>
        <p class="productDes">A comfortable collar made with natural materials.</p>
        <p><button>Add to Cart</button></p>
    </div>
        
  
       <div class="card">
        <img src="collar.png" alt="Denim Jeans" style="width:100%">
        <p class="productName">Leather Collar</p>
        <p class="price">$<strike>9.99</strike></p>
        <p class="newPrice">2.99</p>
        <p class="productDes">A comfortable collar made with natural materials.</p>
        <p><button>Add to Cart</button></p>
      </div>
</div>

In your CSS:

 .wrapper{
    /* width: 100%; */
    display:flex;
    flex-direction:row;
    justify-content:center; //there are several options to position
    align-items:center;
    flex-wrap: wrap; //if the display gets too small, the cards will automatically reposition on a different line

}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  /* margin: auto; */ //no more need because parent controls position.
  text-align: center;
  font-family: arial;
}

Final Product:

<html>
<head>
<meta charset="utf-8">
<title>Pet Store</title>
<style>
/* styling for various elements... */

.productName {
    font-size:68px;
    font-weight:lighter;
    padding:10px;
}

.productDes {
    padding:10px;
}

.newPrice {
 font-size: 32px; 
 color:#272727;
 font-weight:bold;
 padding:10px;
}

</style>
</head>

<body>

<!-- Rest of the content -->

</b

Answer 2

To make your cards display in a row, you'll need to nest them inside a div with the property set to display: flex;

In your HTML:

<div class="wrapper">
    <div class="card">
        <img src="collar.png" alt="Denim Jeans" style="width:100%">
        <p class="productName">Leather Collar</p>
        <p class="price">$<strike>9.99</strike></p>
        <p class="newPrice">2.99</p>
        <p class="productDes">A comfortable collar made with natural materials.</p>
        <p><button>Add to Cart</button></p>
    </div>
        
  
       <div class="card">
        <img src="collar.png" alt="Denim Jeans" style="width:100%">
        <p class="productName">Leather Collar</p>
        <p class="price">$<strike>9.99</strike></p>
        <p class="newPrice">2.99</p>
        <p class="productDes">A comfortable collar made with natural materials.</p>
        <p><button>Add to Cart</button></p>
      </div>
</div>

In your CSS:

 .wrapper{
    /* width: 100%; */
    display:flex;
    flex-direction:row;
    justify-content:center; //there are several options to position
    align-items:center;
    flex-wrap: wrap; //if the display gets too small, the cards will automatically reposition on a different line

}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  /* margin: auto; */ //no more need because parent controls position.
  text-align: center;
  font-family: arial;
}

Final Product:

<html>
<head>
<meta charset="utf-8">
<title>Pet Store</title>
<style>
/* styling for various elements... */

.productName {
    font-size:68px;
    font-weight:lighter;
    padding:10px;
}

.productDes {
    padding:10px;
}

.newPrice {
 font-size: 32px; 
 color:#272727;
 font-weight:bold;
 padding:10px;
}

</style>
</head>

<body>

<!-- Rest of the content -->

</b

What is the best way to align product cards side by side instead of stacking them on separate lines?

Answer №1

Similar questions

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

The blur filter in Safari causes colors to appear distorted

Having issues with the <ul> tag not displaying correctly

What is causing the malfunction of the position within this particular section?

Transferring information from an HTML page to a PHP script

Is there a way to adjust the text color of a label for a disabled input HTML element?

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

Adjust the color of the text for the items in the drop-down field on the WooCommerce

The Hover Hover textbox stays in place once clicked on

Is there a way to adjust the placement of the h1 tag using the before pseudo-element?

Issues with LESS rendering on the Django production server

issues with padding in the main content section

Unable to locate child after adding element to HTML

Applying CSS to both pop-up and desktop interfaces can be achieved through the use of media queries or alternative solutions

Experiencing difficulty in retrieving the title of the latest post

How can I improve the empty space in HTML after PHP processing?

Enhancing the appearance of the Switcher by framing it with

Adjust css rotation to direct an element towards a specific point

Exploring individual elements within a set of data, the age-old art of classic ASP

Make sure to load the gif image before any other images are loaded from the css