how to parallel increase two div height if they are in one container

Question

How to make both div heights equal with css. I want to see side by side these both divs.

<div>How to make two div heights equal with css.How to make two div heights equal with css.</div>

OR

<div>How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css.</div>

You want div to be side by side? – Nikhil Batra Jul 14 '15 at 06:11 — Nikhil Batra, Jul 14 '15 at 06:11

score 3 · Answer 1 · answered Jul 14 '15 at 06:33

Assuming that you have divs side by side, you can easily use:

display:flex

Your HTML is:

<div class="row">
  <div class="col">How to make two div heights equal with css.How to make two div heights equal with css.</div>

  <div class="col">How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.</div>
</div>

The CSS will be:

.row {
    display: flex; /* equal height of the children */
}

.col{
    border: 1px solid black;
    flex:1; // use this if you want width to be equal as well

}

See the fiddle: http://jsfiddle.net/9qzzu1c7/

score 0 · Answer 2 · 2015-07-14T06:29:37.940

0

If I understand right you want them side by side cause divs actually appears under each other? If so:

I want to see side by side these both divs.

https://jsfiddle.net/ym2c64ay/

<div id="parent">
<div>How to make two div heights equal with css.How to make two div heights equal with css.</div>
<div>How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css.</div>
</div>

div{
    background: #F00;
    float: left;
    width: 50%;
}

edited Jul 14 '15 at 06:29

answered Jul 14 '15 at 06:23

this doesn't work, if the text is wide enough they will slide beneath each other. Also OP is asking for both heights to be equal – Abdul Ahmad Jul 14 '15 at 06:23
thanks. but this question isn't really clear. – Jul 14 '15 at 06:26
But i want to make equal height both
if content increase in any div so both div height increase parallel.
– Mohammed Javed Jul 14 '15 at 06:26
edited my answer. this will work. – Jul 14 '15 at 06:30

score 0 · Answer 3 · answered Jul 14 '15 at 06:27

0

assuming only two divs, you could use this css

div{display:inline-block;height:400px;width:48%;overflow-y:scroll;}

demo

Change the height as needed. You can set overflow to auto also.

answered Jul 14 '15 at 06:27

lukeocom

3,243
3
18
30

score 0 · Answer 4 · answered Jul 14 '15 at 06:27

there are many ways to display divs side by side, you can use floats with static widths and heights, or you can use display inline-block with percent widths and static heights.

However, none will really give you equal heights on both divs without explicitly giving a height. and its not very helpful if you have static heights because what if the text you have needs to get longer and the height can no longer hold the amount of text.

One easy way to accomplish this is to use table row and cell like this: http://jsfiddle.net/7ch85rs1/

how to parallel increase two div height if they are in one container

4 Answers4