CODEWITHSUNDEEP
jqueryhtmlcssweb
user3364292
user3364292

Reputation: 27

3 divs with height of tallest?

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.

Upvotes: 0

Views: 1940

Answers (6)

G.L.P
G.L.P

Reputation: 7217

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>

Upvotes: 3

qtgye
qtgye

Reputation: 3610

You can use flexbox property.

SAMPLE

.parent {
  display: flex;
}

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

Upvotes: -1

4dgaurav
4dgaurav

Reputation: 11496

add the following css

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

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10285

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;}

Upvotes: 0

T J
T J

Reputation: 43166

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

Upvotes: 0

jme11
jme11

Reputation: 17407

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);
    });
});

Upvotes: 0

Related Questions