CODEWITHSUNDEEP
htmlcss
PHV
PHV

Reputation: 63

How can I put my divs next to each other?

I have a product grid on the homepage of my site that is supposed to show more information when you hover above the image. I got this to work, but when I want to add more products next to each other, I only see one product. In my CSS I changed the position attribute from absolute to relative, this shows more products. The only problem then is that any text under my product will change layout when I hover above this. How can I put the divs next to each other without this happening?

.home-products {
  width: auto;
  height: 250px;
}

.product-image-home {
  height: 200px;
}

.product-grid {
  position: absolute;
  background-color: white;
  z-index: 1;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  width: 225px;
  padding-bottom: 15px;
}

.product-grid h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}

.product-overlay-button {
  background: #85bf31;
  height: 550px;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 0.6em 2em;
  margin-top: 5px;
  text-decoration: none;
  text-align: center;
}

.product-grid:hover {}

.product-info {
  display: none;
  width: 225px;
  text-align: center;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
}

.product-info p {
  margin-left: 7px;
  margin-right: 7px;
}

.product-grid:hover .product-info {
  display: block;
}

.product-grid:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
<div class="home-products">
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
</div>
<p>Testing text</p>

CodePen

Upvotes: 1

Views: 136

Answers (2)

soraku02
soraku02

Reputation: 340

I have used your code and updated it to get to your requirement. Now To explain What I did is, you were using float:left, which causing the lower text to float beside the product-grid, Now I removed that code and added display:flex to it's parent i.e home-products also added flex-wrap:wrap to maintain responsiveness.

The flex-wrap property specifies whether the flexible items should wrap or not. When it is set to wrap it specifies that the flexible(flex items) items will wrap if necessary

Note: try opening the snippet in full page to view responsiveness

.home-products {
/*   width: auto; */
/*   height: 250px; */
  display:flex;
  flex-wrap: wrap;
}

.product-image-home {
  height: 200px;
}

.product-grid {
  position: relative;
  background-color: white;
  z-index: 1;
/*   float: left; */
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  width: 225px;
  padding-bottom: 15px;
}

.product-grid h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}

.product-overlay-button {
  background: #85bf31;
  height: 550px;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 0.6em 2em;
  margin-top: 5px;
  text-decoration: none;
  text-align: center;
}

.product-grid:hover {
}

.product-info {
  display: none;
  width: 225px;
  text-align: center;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
}

.product-info p {
  margin-left: 7px;
  margin-right: 7px;
}

.product-grid:hover .product-info {
  display: block;
}

.product-grid:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
<div class="home-products">
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
  
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
</div>
<p>Testing text</p>

Upvotes: 1

Zachiah
Zachiah

Reputation: 2627

A good start is to add

max-height: 225px;
overflow: visible;

to product-grid

Upvotes: 0

Related Questions