Video column height match

Question

I have a two column section, one side contains a video, the other contains text.

They are both 50% width and I want them to have equal height as they respond down together

section {
  width: 1000px;
}

.half {
  width: 50%;
  position: relative;
  float: left;
}

.grey {
  background: #f5f5f5;
}

<section>
  <div class="half grey one">
    <p>text goes here.</p>
  </div>
  <div class="half">
<iframe  src="https://www.youtube.com/embed/8kyWDhB_QeI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

The text in the left column also needs to always stay central, horizontally and vertically.

score 0 · Accepted Answer · answered Mar 14 '18 at 14:43

You can do it with the Flexbox:

section {
  display: flex; /* displays flex-items (children) inline where the height of all items is dictated by the height of the "tallest" one (achieved by the default "align-items: stretch") */
  width: 1000px;
}

.half {
  width: 50%;
  position: relative;
  /*float: left; not necessary */
}

.grey {
  display: flex;
  justify-content: center; /* horizontally centered */
  align-items: center; /* vertically centered */
  background: #f5f5f5;
}

<section>
  <div class="half grey one">
    <p>text goes here.</p>
  </div>
  <div class="half">
    <iframe  src="https://www.youtube.com/embed/8kyWDhB_QeI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

I've noticed when there is more than one item in the left div that no longer stack on top of each other, they will go side by side. for example I have three different modules: title, text and a button. By adding the code you gave they stack along side each other. — , Mar 14 '18 at 15:12
Just add `flex-direction: column` to the parent or `.grey` which will then stack flex-items or children vertically. — VXp, Mar 14 '18 at 16:04

Video column height match

1 Answers1