CODEWITHSUNDEEP
htmlcss
adriano_effe
adriano_effe

Reputation: 47

Have a div with the same height as a sibling image

I'm trying to do a responsive design of a panel consisting of an image and another container with its own internal elements, both side-by-side.

I have a parent div and inside an img and another div tags. Those two children tags have are floated block with a width in % and that works.

The problem is, when I shrink the page, the img shrinks to respect the % width rule and so does its height and it should stay that way, but the div on the side doesn't change its height to be the same as the sibling image.

I wrapped them in another div and put the internal div at height: 100% in hope that would do the trick but nothing.

I'd like to get the right div to change its height according to the left image.

.img-container {
    display: block;
    width: 59%;
    float: left;
}
    
img {
    width: 100%;
}

.product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 41%;
    float: left;
    background-color: #e4d233;
}
      
.product-img {
    width: 45%
}
<div class="imgProductContainer">
	<div class="img-container">
		<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
	</div>
	<div class="product-container">
		<img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
		<p><span id="product2Name"></span><br>
		<span>2.00 €</span></p>
	</div>
</div>

Upvotes: 1

Views: 3293

Answers (2)

Dirk
Dirk

Reputation: 831

.imgProductContainer {
  display: flex;
  flex-direction: row;
  /*
    justify-content: center;
    align-items: center;
  */
}

.img-container {
  width: 59%;
}

img {
  width: 100%;
}

.product-container {
  width: 41%;
  background-color: #e4d233;
}

.product-img {
  width: 45%
}
<div class="imgProductContainer">
  <div class="img-container">
    <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />
  </div>
  <div class="product-container">
    <img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
    <p><span id="product2Name"></span><br>
      <span>2.00 €</span></p>
  </div>
</div>

i guess thats how it should look like ? i am not sure what .product-img class was for so i replaced productImg class with it.

i also removed all floats an just made the main container a flex box with its child aligned, you should look deeper into flexbox if you want something else here.

hope it helps

Upvotes: 2

Dylan
Dylan

Reputation: 1714

You can force equal height for the containers using CSS Grid:

.img-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
img {
    width: 100%;
}
.imgProductContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #e4d233;
}
      
.product-img {
    width: 100%;
}
<div class="imgProductContainer">
	<div class="img-container">
		<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
	</div>
	<div class="product-container">
		<img id="product2Img" class="productImg" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
		<p><span id="product2Name"></span><br>
		<span>2.00 €</span></p>
	</div>
</div>

Upvotes: 0

Related Questions