3 divs with height of tallest?

Question

I have a template I use to create a responsive website. It uses boxes with percentage widths, floats and clears. One example is this link. As you can see, the three boxes are different heights. Setting a height is easy enough, but if the content is too long, the div grows bigger than the rest.

My question is, is there an easy way to have all three divs take their height from the tallest div?

CSS for the boxes and the media query is below.

.clear{clear:both;}
.box{float:left; margin:1%; padding:1.5%; background:#6f0100;}
.box p.small{font-size:1.1em; margin-bottom:7px;}
.box img{width:100%; height:auto;}
.row{clear:both;}
.center{text-align:center;}
.box.gallery{}
.box.gallery img{width:30%; height:auto; margin:1%; border:1px solid #000; float:left; max-width:165px;}
.box.wedding img{border:4px solid #888; max-width:120px;}
.boxgallery{width:24.55%; margin:0 0.6% 0 0; padding:0;}
.boxgallery.last{margin:0!important;}
    .boxgallery img{float:left; width:100%; height:auto; clear:both; margin-bottom:2%; transition:opacity 0.3s;}
    .boxgallery img:hover{opacity:0.4;}
.h145{min-height:160px;}

.box10{width:5%;}
.box20{width:15%;}
.box25{width:20%;}
.box30{width:25%;}
.box33{width:28.3%;}
.box40{width:35%;}
.box50{width:45%;}
.box60{width:55%;}
.box70{width:65%;}
.box80{width:75%;} 
.box90{width:85%;}
.box100{width:95%;}

@media (max-width: 40em) {
  .box{clear:both; margin:15px auto; width:90%; float:none}
  .h145{min-height:0px!important;}
}

.slicknav_menu{display:none;}
@media screen and (max-width: 58em) {
.js #menunav{display:none;}
.js .slicknav_menu{display:block;}

    p.top{display:none;}
div#logo img {float:none; margin:0 auto;}
div#logo{text-align:Center;}
    }
@media (max-width: 700px) {
div#footerleft {float:left; margin: 0 94px 0 0; width: 95%}
    div#footerleft p {float:left; margin-top:0; font-size:16px; color:#fff;}
    div#footerleft p a {color: #bdaec6}
    div#footerright {width: 95%; margin:0; float:left; clear:both;}
    div#footerright img {margin-top:5px}
    div#footerright p {margin-top: 5px; font-size:16px; text-align:left; color:#fff;}
    div#footercontainer{padding:15px;}
}

Thanks in advance.

Can you try the DIV height 100% solution. such: http://stackoverflow.com/questions/19122392/div-height-100-percent — Zeigen, Jul 01 '14 at 10:30
Here's another similar solution on stackoverflow: http://stackoverflow.com/questions/16594891/make-children-divs-the-height-of-tallest-child — JTK, Jul 01 '14 at 10:41
http://codepen.io/micahgodbolt/pen/FgqLc is showing an example about your question. Check it out. — Gunaseelan, Jul 01 '14 at 10:47

score 3 · Answer 1 · edited May 22 '18 at 13:49

3

DEMO Try like this to get equa height columns

CSS:

.box {
    display:table;
}
.row {
    display:table-row;
}
.row div {
    display:table-cell;
    background-color:#ccc;
}

HTML

<div class="box">
    <div class="row">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
 </div>

edited May 22 '18 at 13:49

Witcher

1,070
2
15
38

answered Jul 01 '14 at 10:45

G.L.P

7,119
5
25
41

score 0 · Answer 2 · answered Jul 01 '14 at 10:38

If you're looking for a jQuery solution you could do something like this:

var row=$('.row');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('.box'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('.box'), function() {
        $(this).height(maxh);
    });
});

score 0 · Answer 3 · answered Jul 01 '14 at 10:42

If ancient browser support is not an issue, you can create equal height columns using pure css by making use of css3 flexible boxes.

for example

HTML

<div id="wrapper">
  <div class="bar"></div>
  <div class="bar">
    <p>Lorem ipsum ... nisl.</p>
  </div>
  <div class="bar"></div>
</div>

CSS

#wrapper {
display:flex;
}
.bar {
width:33.3%;
}

Demo

more about flexboxes@ CSSTricks

score 0 · Answer 4 · answered Jul 01 '14 at 10:48

0

As per posted CSS Code here just update the below lines in your CSS Code. Check the DEMO.

Note: You need to update these lines only.

.row{display:table; border-spacing: 20px;}
.box {background:#6f0100; margin: 1%;padding: 1.5%; display:table-cell;}

answered Jul 01 '14 at 10:48

Kheema Pandey

9,977
4
25
26

@user3364292 Is this relevant code helpful for you? – Kheema Pandey Jul 01 '14 at 10:51

score 0 · Answer 5 · answered Jul 01 '14 at 10:49

0

add the following css

#allcontent .row {
    display: flex;
}
.box.box33 {
    flex: 1;
}

answered Jul 01 '14 at 10:49

4dgaurav

11,360
4
32
59

qtgye · Answer 6 · 2014-07-01T11:00:21.730

-1

You can use flexbox property.

SAMPLE

.parent {
  display: flex;
}

.parent div {
  border: 1px solid red;
  margin: 0 10px; 
}

edited Jul 01 '14 at 11:00

answered Jul 01 '14 at 10:42

qtgye

3,580
2
15
30

3 divs with height of tallest?

6 Answers6