0

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>

3

3 Answers 3

1

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>

1

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>

-1

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

1
  • flexbox is not supported everywhere
    – Mike Baker
    Nov 29, 2017 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.