float left and right make 2 column to be same height

Question

Why height 100% for the right floated column can't make it 100% height? Now i'm confused what 100% height really means.

How to make 2 column to have equal height if I'm using float?

.wrap {
  height: 100%;
  overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
}

.right {
  float: right;
  background: #ccc;
  width: 50%;
  text-align: center;
  height: 100%; //make right has the same with left doesn't work
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

Bootstrap uses floats so the solutions in my linked dupe would answer this question. — Paulie_D, Aug 19 '17 at 13:16
@Paulie_D Agree it does has an answer, though still not explain why. Feel free to close it again and I will leave it be :) — Asons, Aug 19 '17 at 13:19
I don't think I can close again now but you might be able to — Paulie_D, Aug 19 '17 at 13:20
@Paulie_D Try... if not, I lost the link so post it as a comment and i will — Asons, Aug 19 '17 at 13:20

Asons · Accepted Answer · 2017-08-19T12:59:39.143

When using percent for height, also the ascendants need a height, all the way to the html, unless one have a fixed height, i.e. viewport units vh, shown in sample 2

Sample 1, with height: 100% on the html, body

html,
body {
  height: 100%;
}

.wrap {
  height: 100%;
  overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
}

.right {
  float: right;
  background: white;
  width: 50%;
  text-align: center;
  height: 100%;
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

Sample 2, with height: 100vh on the wrap

.wrap {
  height: 100vh;
  overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
}

.right {
  float: right;
  background: white;
  width: 50%;
  text-align: center;
  height: 100%;
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

Updated

Also, a more modern way to do something like that is to use Flexbox instead of float, much more responsive and elegant coding.

.wrap {
  display: flex;
  overflow: hidden;
  width: 400px;
}

.left, .right {
  flex-basis: 50%;
  text-align: center;
  border: 1px dotted gray;
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

@JennyMok I updated my answer and also added a couple of duplicates to draw more attention to these answers/question — Asons, Aug 19 '17 at 13:26
in what case vh has problem? Never use it but it worked anyway in this case haha. — Jenny Mok, Aug 19 '17 at 13:51
@JennyMok It doesn't have any problem, though as it is based on the viewport it can sometimes have a disadvantage for the same reason. — Asons, Aug 19 '17 at 14:18

score 0 · Answer 2 · answered Aug 19 '17 at 12:45

Height 100% will take the height as 100% to its parent element if the element inside the div need that much height.

In Your case right div have only one element which dont need this much big height to render.

IN case you want both left and right container to be of same height kindly provide height in px like below

.left{
height:200px
}
.right{
height:200px
}

score 0 · Answer 3 · answered Aug 19 '17 at 12:50

You can't add 100% to be same height, because the element have floa right is not have childrens like element before. And 100% is mean, the height as 100% height children. So you must set the height with 375px to be same height.

.right {
height:375px;
}

See at Js fiddle here : https://jsfiddle.net/7ybLa9fj/1/

float left and right make 2 column to be same height

3 Answers3