How to make 2 floating divs always match their height based on content with CSS?

Question

I have 2 floating divs with JS dynamic content. I need to make them to always match eachother height - perfectly to fill 100% of parent height. How to do this? I know it will be probably marked as duplicate, but I couldnt fit any solution into my current situation (from indeed plenty of results)

.parent {
  background-color: red;
  width: 60%;
  float: left;
  margin-bottom: 10px;
}

.left {
  float: left;
  width: 50%;
  background-color: green;
  height: 100%;
}

.right {
  float: left;
  width: 50%;
  background-color: purple;
  height: 100%;
}

<div class="parent">
  <div class="left">
    some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/>
  </div>
  <div class="right">
    some other content
    <br/> but less lines
    <br/> need to expand this as well
    <br/> to match the height of left div
  </div>
</div>
<div class="parent">
  <div class="left">
    some other content
    <br/> but less lines
    <br/> need to expand this as well
    <br/> to match the height of left div
  </div>
  <div class="right">
    some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/>

  </div>
</div>

Possible duplicate of [How to make a floated div 100% height of its parent?](https://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent) — sol, Jul 13 '17 at 14:16

score 1 · Accepted Answer · answered Jul 13 '17 at 14:20

Use a flexbox instead of floats.

.parent {
  background-color: red;
  width: 60%;
  padding: 1%;
  margin-bottom: 10px;
  display: flex;
}

.left {
  width: 50%;
  background-color: green;
}

.right {
  width: 50%;
  background-color: purple;
}

<div class="parent">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

score 1 · Answer 2 · answered Jul 13 '17 at 14:33

Instead of floating and specifying height to the child divs use display: flex; which is a CSS3 rule. Be careful, it is not supported by older browsers.

.parent {
  background-color: red;
  width: 60%;
  display: flex;
  margin-bottom: 10px;
}

.left {
  width: 50%;
  background-color: green;
}

.right {
  width: 50%;
  background-color: purple;
}

<div class="parent">
  <div class="left">
    some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/>
  </div>
  <div class="right">
    some other content
    <br/> but less lines
    <br/> need to expand this as well
    <br/> to match the height of left div
  </div>
</div>
<div class="parent">
  <div class="left">
    some other content
    <br/> but less lines
    <br/> need to expand this as well
    <br/> to match the height of left div
  </div>
  <div class="right">
    some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/> some
    <br/>conten
    <br/>more
    <br/>content
    <br/>

  </div>
</div>

score -1 · Answer 3 · edited Jul 14 '17 at 09:50

-1

You could use this jQuery plugin http://brm.io/jquery-match-height/

edited Jul 14 '17 at 09:50

marc_s

732,580
175
1,330
1,459

answered Jul 13 '17 at 14:21

Mike Baker

42
3

flexbox is not supported everywhere – Mike Baker Nov 29 '17 at 16:44

How to make 2 floating divs always match their height based on content with CSS?

3 Answers3