Highlighted

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

Contributor ,
Jan 29, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

402

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Contributor ,
Jan 29, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

403

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 29, 2018 0
Adobe Community Professional ,
Jan 29, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 0
Contributor ,
Jan 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 0
Adobe Community Professional ,
Jan 29, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 1
Contributor ,
Jan 29, 2018

Copy link to clipboard

Copied

Hey Nancy,

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

thanks again for your help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 0
LEGEND ,
Jan 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 1
Contributor ,
Jan 29, 2018

Copy link to clipboard

Copied

Thanks osgood! That was my next plan:)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 0
Contributor ,
Jan 30, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0
Contributor ,
Jan 30, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0
Adobe Community Professional ,
Jan 30, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0
Contributor ,
Jan 30, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0