how to have equal height columns with equal size image in the column

Question

i want to have equal column size with equal size image in the column, for example if the first column have less text and the second column have two or three paragraph text it should be equal, also the image size should equal with the second column image, if the image size is big or small than the first column but it should fit in both column in equal size.

<div class="container">
    <div class="row">
<!-- this is one column -->
    <div class="gold">
    <div class="products owl-one owl-carousel">
          <div class="pitem">
            <a href="#"><img src="images/world.jpg"></a>
            <h3><a href="#">this is title</a></h3>
            <p>this is paragraph</p>
          </div>

      </div>
    </div>

<!-- this second column -->
    <div class="gold">
    <div class="products owl-one owl-carousel">
          <div class="pitem">
            <a href="#"><img src="images/world.jpg"></a>
            <h3><a href="#">this is title</a></h3>
            <p>this is paragraph this is paragraph this is paragraph this is paragraph this is paragraph</p>
          </div>

      </div>
    </div>

<!-- this third column -->
    <div class="gold">
    <div class="products owl-one owl-carousel">
          <div class="pitem">
            <a href="#"><img src="images/world.jpg"></a>
            <h3><a href="#">this is title</a></h3>
            <p>this is paragraph this is paragraph this is paragraph</p>
          </div>

      </div>
    </div>

  </div>
</div>

Css Code here.....

.gold{background: #d9edfb;}

.nopad{padding:0 !important;margin:0 !important;}

.products{position: relative; padding:25px 0px;}

.pitem {background: #fff; padding:12px; margin:5px; }

.pitem:hover{z-index: 50;border-radius: 3px;text-decoration: none;box-shadow: 0 7px 17px 0 rgba(23,84,116,0.18); border: solid 0.9px #f3f3f3;}

.pitem h3 {center; font-size: 15px}

.pitem img{width:100%; height: auto;}

.pitem p {margin-bottom: 20px; color:#444; text-align: justify;font-weight: 700;}

Can you use Grid or FlexBox to get this done? In which browsers do you need this to work? — nephiw, May 13 '19 at 17:13
For image size you need to make sure they are the same aspect ratio, and for the equal height boxes, it is super easy if you use flex — Huangism, May 13 '19 at 17:18
@saurabh i have add css code, please help me in this matter. thank you — ibadullah, May 13 '19 at 17:43
Possible duplicate of [CSS - Equal Height Columns?](https://stackoverflow.com/questions/2114757/css-equal-height-columns) — Adam Jenkins, May 13 '19 at 17:44

JustBlossom · Answer 1 · 2019-05-13T22:44:07.873

First: use columns inside of your rows if you are using bootstrap.

Once you have columns, don't mess around with setting heights of the columns themselves (that seems to go against the whole point of using columns that are reaponsive). Instead, try this:

Create a row with two columns. Create a div in each column. Let's call the div "content". That div will hold images and text.

Then, with JavaScript, I think you can get the height of the 2 divs. Check out this question: How do you get the rendered height of an element?

So let's say the height of the div in column 1 is height1 = 20px and the height in column 2 is height2=50px. Get those values using Javascript, and set each one to a variable.

Use a conditional statement to tell which one is taller. Then set the height of either div to the height of the largest one.

I can't write the code right now, but hopefully this logic will help:
x = contentdiv1.getHeight()
y = contentdiv2.getHeight()
if x >= y --> y.setHeight(x.height)
else --> x.setHeight(y.height)

score 0 · Answer 2 · answered May 13 '19 at 17:25

0

Use bootstrap class col it will automatically make your div responsive and give it height that you need Div class=col

answered May 13 '19 at 17:25

Ricky

488
3
14

how to have equal height columns with equal size image in the column

2 Answers2