Skip to main content
kineticcreative123
kineticcreative123
Inspiring
January 29, 2018
Answered

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

  • January 29, 2018
  • 1 reply
  • 1264 views

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

    This topic has been closed for replies.
    Correct answer Jon Fritz

    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>


    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.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 29, 2018

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

    Nancy O'Shea— Product User & Community Expert
    kineticcreative123
    kineticcreative123Author
    Inspiring
    January 29, 2018

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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 29, 2018

    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>

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices