how to set two div's height equal with css

Question

I want to make to 2 div's height equal, if one is bigger another should stretch to its height. I want to use only CSS. Following is my code(Fiddle):

HTML:

<div class="common">
    lorem ipusm random text just for check
</div>
<div class="common">
    lorem ipusm random text just for check lorem ipusm random text just for check
</div>

CSS:

.common{
  border:1px solid red;
  float:left;
  margin-left:5px;
  width:20%;
  padding:5px;
}

This is fiddle for this

It looks like they would have to be contained by a common container and being resized according to that container. For example, inside an invisible div, and have their dimensions set to a percent of the containing div. — , Mar 08 '14 at 18:06

score 1 · Accepted Answer · answered Mar 08 '14 at 18:19

1

You can use the flexbox model. Just add a container for the divs. And add display: flex to the parent, and flex: 1 for children.

Edited jsfiddle

You can find more information about flexbox on http://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Mar 08 '14 at 18:19

jeremybarbet

890
1
15
28

It's like saying flex:"true". – jeremybarbet Mar 08 '14 at 18:59

score 1 · Answer 2 · answered Mar 08 '14 at 19:09

1

I think you should either use table:

.container{
    display:table;
    border: solid 1px green;
    width: 200px;
}
.common{
    display:table-cell;
    border:1px solid red;
    margin-left:5px;
    width:20%;
    height:100%;
    padding:5px;
}

table fiddle

or js:

var maxHeight = 0;
$('.common').each(function(){
    var height = $(this).height();
    if(height > maxHeight){
        maxHeight = height;
    }
})

$('.common').each(function(){
    $(this).height(maxHeight);
})

js fiddle

answered Mar 08 '14 at 19:09

Cubius

1,294
2
15
33

which one is advisable to use.. `display:table` or `display:flex` – Bharat Soni Mar 08 '14 at 19:19
flexbox = cool, table = browser support. for your example I would use table. http://stackoverflow.com/questions/18419082/flexbox-vs-tables-why-do-we-need-flexbox – Cubius Mar 08 '14 at 19:35

score -1 · Answer 3 · answered Mar 08 '14 at 18:24

The CSS property that controls the height of the elements is called height.

the height property does not support negative values. If a percentage is indicated, draws on the height of the parent element. If the parent element does not have an explicitly defined height, the auto height value is assigned.

The inherit value indicates that the height of the element is inherited from its parent element. The auto value, which is used if not explicitly set a value for this property indicates that the browser should automatically calculate the height of the element, considering its content and available on the site.

CSS defines two other related properties of the elements height: min-height and max-height.

.common{
  border:1px solid red;
  float:left;
  margin-left:5px;
  min-height: 100px;
  width:20%;
  padding:5px;
}

more information Height

not looking for static height solution. `min-height` has some other roles to play I guess. — Bharat Soni, Mar 08 '14 at 18:28

how to set two div's height equal with css

3 Answers3