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

Switching classes in real time with JavaScript

Enhancing the appearance of unordered lists with CSS. Creating numbered lists

Images are not being shown on the desktop carousel display

Customize the appearance of the date input box in MUI KeyboardDatePicker

Execute JavaScript code following the completion of loading and running an external script

Can the background color of HTML header text be altered using JavaScript in JQGRID?

The text element does not line up with the icons

Issue with slideout menu hyperlinks malfunctioning

AngularJS HTTP POST request encountering issue with success function not functioning as expected

error in URI (not a valid URI):

Omitting an element from the CSS styling

Guide to implementing CSS3 transitions with prefixes using JavaScript

Artboard: Easily navigate through pictures

Limit the size of images with CSS properties like max-height or max-width

"Interactive elements like dropdown menus and clickable buttons that transform the content of an HTML

The width of the Ion-slide is dynamically determined by the styling

Problem with traversing from parent to children elements using jQuery selectors

Listen for the load event during an AJAX request without using jQuery's add

jQuery "slide" animation without using <br>

Steps for successfully passing an object in a dynamically generated function invocation