Two <div> "columns" within a parent <section>, trying to vertically center the right-hand div relative to the parent.

Question

I have a that contains two divs that form two "columns" with classnames context_left and context_right. The height of the lefthand column div is greater than that of the right. The lefthand column has a width of 30% and righthand column has a width of 45%. The righthand column div is right-floated. If I remove the right float or lower the width, the righthand div column disappears.

The parent has no defined height. How do I get the righthand to align vertically relative to the parent height?

HTML Code:

<section>
        <div class="content context_left">
              <p>Lorem Ipsum (This is actually a long paragraph)</p>
              <p>Lorem Ipsum (So is this one) </p>
              <p style="padding: 5%;">
                        <b>Foo Bar</b>
                    </p>
                    <p>
                        Lorem Ipsum (long paragraph 3)
                    </p>
                </div>
                <div class="context_right">
                    <img src="foo.svg" alt="bar" id="logo">
                </div>
            </section>

CSS Code:

section {
overflow: hidden;
}

.context_left{
    display: inline-block;
    width: 30%;
    margin-left: 10%;
    overflow: hidden;
    float: left;
    text-align: left;
    vertical-align: middle;
    font-family: 'Lato';
    font-weight: 300;
    font-size: medium;
} 

.context_right{
    display: inline-block;
    height: 300px;
    float: right;
    line-height: 300px;
    width: 45%;
    padding-right: 10%;
}  /* This is the one I'm trying to vertically align relative to <section> */

What I've tried:

--Display parent as table and child s as table-cells and setting vertical-align to middle --Set parent and child display to inline-table with vertical-align --Try using display: flex on the parent to create a flexbox that I could then vertically align --Defining the height of the parent so that I can use vertical-align (didn't matter, didn't work) --Changing the font size --Setting position to absolute (horrible overlapping elements)

I can't use absolute positioning or additional padding because it would look bad on mobile. Plus, using top: 50% seems to push it further than half the height as defined by the the lefthand column's height, so it's not a relative option that will scale. What does S.O. recommend?

Answer 1

Did you mean something like this:

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

section>div {
  border: 1px solid;
}

section>div:nth-child(1) {
  -webkit-box-flex: 0.3;
  -ms-flex: 0.3;
  flex: 0.3;
}

section>div:nth-child(2) {
  -webkit-box-flex: 0.45;
  -ms-flex: 0.45;
  flex: 0.45;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}


/* This is the one I'm trying to vertically align relative to <section> */

<section>
  <div class="content context_left">
    <p>Lorem Ipsum (This is actually a long paragraph)</p>
    <p>Lorem Ipsum (So is this one) </p>
    <p>
      <b>Foo Bar</b>
    </p>
    <p>
      Lorem Ipsum (long paragraph 3)
    </p>
  </div>
  <div class="context_right">
    <img src="foo.svg" alt="bar" id="logo">
  </div>
</section>