Can't get div's to maintain equal hight with different amount of content

[kineticcreative123]

Hi,

I have a landing page I'm working on and am having trouble getting both responsive boxes to maintain equal height. One has more content than the other. How could I possibly get this to work? Here is a link to the page I'm working on:

capital analytics trial

Thanks for any help.

UPDATE: I changed the boxes to display: table-cell; which worked but now they won't move on top of one another when sized to mobile

[Nancy OShea]

Since you don't want table-cell on mobile widths, put your table-cell into a media query for desktops.

[kineticcreative123]

OK. Thanks Nancy. Would this enable them to stack on mobile if I refer to table-cell in only desktop query?

[Nancy OShea]

I would wrap the parent container in a Table first.

<style>

/**vertically aligned in medium, large displays**/
@media only screen and (min-width: 768px) {

.concontainer {
   display: table;
   table-layout: fixed
  }
.left-box, .right-box {
   display: table-cell;
   vertical-align: middle;
   float: none;
  }
}
</style>

[kineticcreative123]

Hey Nancy,

I got it work work. I tooled around in codepen. https://codepen.io/anon/pen/RQwYXX

thanks again for your help.

[osgood_]

Use flexbox its so simple, you can even get the buttons to line up with each other instead of being staggered.

[kineticcreative123]

Thanks osgood! That was my next plan:)

[kineticcreative123]

OK. So took a shot at my first flexbox. Long over due. Got it to work. Kind of. Why would my content be dropping below and outside of the box? I can't get the buttons to center either. Would this be something to do with a wrap setting? This is what I'm looking at;

capital analytics trial

[kineticcreative123]

This is my css:

<!-- flexbox-->

      <style>

  .flexcontainer {

    display:flex;

    flex-wrap:wrap;

    flex-direction:row;

    justify-content:flex-start;

    align-items:stretch;

}

.left {order:1; background-color:#0091b3; flex-basis:100%; height:300px;padding:35px;}

.right {order:2; background-color:#7a979f;flex-basis:100%; height:300px;padding:35px;}

@media screen and (min-width:600px) {

   .flexcontainer {

       flex-wrap:nowrap;

   }

    .left {

        flex-basis:50%;

        order:1;

    }

    .right {

        flex-basis:50%;

        order:2;

    }

}

</style>

      <!-- end flexbox-->

This is my html:

<div class="flexcontainer">

    <div class="left">

    <img style="margin:0 auto;display:block;width:80%;height: auto;margin-top:45px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/pc-capitalanalytics_hires-white_720_con.png" alt="calogo" height="15" width="494"><p style="text-align:center; color: #ffc627;font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 38px; font-weight: 400;margin-bottom: 15px">FREE TRIAL</p><p style="text-align:center;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-size:20px;color:#b4c0c5;">vulputate vel, odio duis, qui vero, nulla suscipit qui in quis dignissim diam ullamcorper feugait, lorem. Ullamcorper adipiscing aliquip. Odio nulla et aliquam, quis facilisi.</p><a style="color: #ffc627; margin 0 auto;font-size:16px;font-weight:700;margin-top:-3px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;cursor: pointer;font-family: 'Open Sans', Helvetica, Arial, sans-serif;text-decoration:none;" href="#">FIND OUT HERE</a>

    </div>

    <div class="right">

    <img style="margin:0 auto;display:block;margin-top:45px;margin-bottom:30px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/hardhat_icon.png" alt="LineItemDetails" height="100" width="100"><p style="text-align:center; color: #ffc627;font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 38px; font-weight: 400;margin-bottom: 15px;line-height:1.25;">WHAT'S YOUR SOLUTION?</p><p style="text-align:center;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-size:20px;color:#b4c0c5;">vulputate vel, odio duis, qui vero, nulla suscipit qui in quis dignissim diam ullamcorper feugait, lorem. Ullamcorper adipiscing aliquip. Odio nulla et aliquam, quis facilisi.</p><a style="color: #ffc627; margin 0 auto;font-size:16px;font-weight:700;margin-top:-3px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;cursor: pointer;font-family: 'Open Sans', Helvetica, Arial, sans-serif;text-decoration:none;" href="#">FIND OUT HERE</a>

    </div>

  </div>

[Jon Fritz · Accepted solution]

That's due to your setting a pixel height of 300 on content that's over 300 pixels tall.

Removing the height settings for .left and .right should do the trick.

[kineticcreative123]

Perfect! Thanks a bunch. How can I get the buttons to center? They center with the media query under 600px.