CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
DLeh
DLeh

Reputation: 24395

CSS match height of other elements in row

I'm using Bootstrap, and I'm trying to make a row of boxes be the same height.

Here is a dumbed-down example:

CSS:

.col-md-4 {
    border:1px solid black; 
    height:100%;
}

Html:

<div class="row">
  <div class="col-md-4">Less text</div>
  <div class="col-md-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit</div>
  <div class="col-md-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
  </div>
</div>

This results in the first box in the row being small, and the third box being very large. I want them all to have the same height.

How do I make the height of all the boxes in the row match the tallest box without setting a static height? I don't know how big the largets box will be. I know I could do this with a table, but that would not be optimal. Is there a way to do this with CSS?

Here is a bootply example. I did some googling but couldn't find what I was looking for.

Upvotes: 0

Views: 216

Answers (3)

Arbel
Arbel

Reputation: 30989

CSS Only solution

Note: Use carefully and target the styles to your specific .col-md-4 elements. But for your code sample:

.col-md-4 {
    display: table-cell;
    float: none;
    border:1px solid black; 
    height:100%;
}

Demo http://www.bootply.com/JXL6MYXiWO

Upvotes: 3

Joshua Whitley
Joshua Whitley

Reputation: 1186

Flexbox is probably your best option at this point in time. See this article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

And current browser support: http://caniuse.com/#feat=flexbox

Upvotes: 0

DeDee
DeDee

Reputation: 2002

$(document).ready(function(){
    var highestCol = Math.max($('.div01').outerHeight(),
                              $('.div02').outerHeight(),
                              $('.div03').outerHeight());
    $('.col-md-4').outerHeight(highestCol);
})

jQuery example, quite fast and effective. Just give those divs additional unique classes, e.g. div01, div02, div03. Check out http://jsfiddle.net/a7jow8c3/

Upvotes: 0

Related Questions