Image not allowing neighboring div to align correctly-CodePudding

I'm designing an online clothing store, and on the product's page I want the product info (on the right) to align with the center of the image (on the left) while both of the divs are centered with the page. However, it seems that no matter what I do, the product info is always pushed down to the bottom corner of the image. It works when the image is removed completely, but unless that happens no formatting in CSS will affect the product-info div.

I've tried floating the elements to the left but that negates the text-align that keeps them centered, and any padding, margin, or dimension changes I make to the product-info only adds to the bottom of the div rather than shifting it up. There's probably something obvious that I'm overlooking, but I've been working on this problem for so long and just can't seem to find a fix.

Can someone please help me?

> Screenshot of how it looks <

* {
  margin: 0px;
  padding: 0px;
}

.product {
  text-align: center;
}

.product-view {
  top: 40px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
}

#product-image {
  width: 400px;
  height: 40%;
  min-width: 40%;
  min-height: 40%;
  padding: 20px;
}

.product-info {
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

#product-name {
  font-size: 25px;
  text-transform: uppercase;
  text-align: left;
}

#product-price {
  font-size: 20px;
  padding: 20px 0px;
  text-align: left;
}

.product-info hr {
  width: 278px;
  opacity: 0.4;
}

#product-sizes {
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  width: fit-content;
}

#size-radio-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 15px;
  border: 1px solid black;
  margin: 5px 10px;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 40px;
  color: black;
  cursor: pointer;
}

#add-to-cart {
  width: 278px;
  height: 40px;
  margin: 0 5px;
  cursor: pointer;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-size: 15px;
  float: left;
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div >
    <div >
      <div >
        <img id="product-image" src="/Media/hoodieblack.png">
      </div>
      <div >
        <div id="product-name">
          <h3>Hoodie - Black</h3>
        </div>
        <div id="product-price">
          <p>$80.00</p>
        </div>
        <hr>
        <div id="product-sizes">
          <label for="size-select">Size</label>
          <div id="size-select">

            <input type="radio" name="size" value="s" hidden id="s-size">
            <label for="s-size" id="size-radio-btn">S</label>

            <input type="radio" name="size" value="m" hidden id="m-size">
            <label for="m-size" id="size-radio-btn">M</label>

            <input type="radio" name="size" value="l" hidden id="l-size">
            <label for="l-size" id="size-radio-btn">L</label>

            <input type="radio" name="size" value="xl" hidden id="xl-size">
            <label for="xl-size" id="size-radio-btn">XL</label>

            <input type="radio" name="size" value="xxl" hidden id="xxl-size">
            <label for="xxl-size" id="size-radio-btn">XXL</label>

          </div>
        </div>
        <button type="button" id="add-to-cart">Add to Cart</button>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Simply add display: flex; to the main parent, in this case, .product. Then you can use align-items: center; to get them in line with one another.

You can also add max-width: 100%; to the image so it resizes accordingly.

* {
  margin: 0px;
  padding: 0px;
}

.product {
  text-align: center;
}

.product-view {
  top: 40px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
}

#product-image {
  width: 400px;
  height: 40%;
  min-width: 40%;
  min-height: 40%;
  padding: 20px;
}

.product-info {
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

#product-name {
  font-size: 25px;
  text-transform: uppercase;
  text-align: left;
}

#product-price {
  font-size: 20px;
  padding: 20px 0px;
  text-align: left;
}

.product-info hr {
  width: 278px;
  opacity: 0.4;
}

#product-sizes {
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  width: fit-content;
}

#size-radio-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 15px;
  border: 1px solid black;
  margin: 5px 10px;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 40px;
  color: black;
  cursor: pointer;
}

#add-to-cart {
  width: 278px;
  height: 40px;
  margin: 0 5px;
  cursor: pointer;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-size: 15px;
} 

.product {
  display: flex;
  align-items: center;
  justify-content: center;
}

#product-image {
  max-width: 100%;
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div >
    <div >
      <div >
        <img id="product-image" src="https://dummyimage.com/800/000/fff">
      </div>
      <div >
        <div id="product-name">
          <h3>Hoodie - Black</h3>
        </div>
        <div id="product-price">
          <p>$80.00</p>
        </div>
        <hr>
        <div id="product-sizes">
          <label for="size-select">Size</label>
          <div id="size-select">

            <input type="radio" name="size" value="s" hidden id="s-size">
            <label for="s-size" id="size-radio-btn">S</label>

            <input type="radio" name="size" value="m" hidden id="m-size">
            <label for="m-size" id="size-radio-btn">M</label>

            <input type="radio" name="size" value="l" hidden id="l-size">
            <label for="l-size" id="size-radio-btn">L</label>

            <input type="radio" name="size" value="xl" hidden id="xl-size">
            <label for="xl-size" id="size-radio-btn">XL</label>

            <input type="radio" name="size" value="xxl" hidden id="xxl-size">
            <label for="xxl-size" id="size-radio-btn">XXL</label>

          </div>
        </div>
        <button type="button" id="add-to-cart">Add to Cart</button>
      </div>
    </div>
  </div>
</body>

</html>