Equal height divs

Question

I'm having fun with a site using bootstrap 3 that has three divs on the main page which, for some browsers and sizes of browser window(*), don't quite line up at the bottom (much to the annoyance of users). I've tried various solutions but have found nothing that addresses the problem without causing breakage elsewhere.

Therefore, I wonder if anyone might have any suggestions. Here's some code:

 <div class="container-fluid light-grey-bg">
    <div class="row-fluid text-center">
        <div class="col-md-12">
            <p class="lead main-tagline">A blurb describing the awesome content of this site.</p>
        </div>

        <div class="clearfix"></div>

        <div class="row-eq-height">
            <div class="col-md-4">
                <div class="top-usp">
                    <a href="/first" class="btn btn-lg btn-info">First link</a>
                    <br/><br/>
                    <img src="/img/home/svg/first.svg"width="260px">
                    <p>The first thing described. This description is quite long and tends to wrap at a different place, thereby changing the size of this box in relation to the others.
                    </p>
                </div>
            </div>

            <div class="col-md-4" style="height: 100%;">
                <div class="top-usp">
                    <a href="/second" class="btn btn-lg btn-info">Second</a>
                    <br/><br/>
                    <img src="/img/home/svg/second.svg"> width="260px">
                    <p>A much shorter description for the second item.
                    </p>
                </div>
            </div>

            <div class="col-md-4" style="height: 100%;">
                <div class="top-usp">
                    <a href="/third" class="btn btn-lg btn-info">Third</a>
                    <br/><br/>
                    <img src="/img/home/svg/third.svg"> width="260px">
                    <p>The third item is much like the second.
                    </p>
                </div>
            </div>



            </div>
        </div>
    </div>

Here's some scss for the page:

.home {
  height: 100%;

  .row-eq-height {
    height: 100%;
  }

  .top-usp {
    background-color: white;
    margin: 15px;
    padding: 20px;
    border-radius: 5px;
    min-height: 235px;
    height: 90%;

    -webkit-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);
    -moz-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);
    box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);

    }
}

Any thoughts on the specific size problem would be appreciated if anyone has a moment.

(*) E.g. iPads, MacBook Airs using Safari. This looks fine on desktop Chrome.

Duplicate - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Paulie_D, Sep 09 '16 at 10:56
Thanks for the link to an article I hadn't been able to find. My HTML looks a bit different to the structure there as I've got an extra level of divs, but I will see if any of the suggested solutions there have any effect. — knirirr, Sep 09 '16 at 11:02
It seems that the closest are the various approaches using flex, which I had tried out before. However, once the screen gets small enough and the divs are laid out above each other then the right-hand edges don't align. The tables and negative margin solutions do not seem to have any effect. — knirirr, Sep 09 '16 at 11:12

score 0 · Accepted Answer · answered Sep 09 '16 at 13:26

I tried various options; flex seems the best until the boxes move to a single column on small screens at which point the right edges don't align. In the end this more-or-less did the trick:

 /* from the "duplicate" ticket */
.row-eq-height {
    overflow: hidden;
 }

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
 }


 /* this seems to be the fix */
 .top-usp {
    ....
    min-height: 250px;
    ....
 }

The height change was necessary as the negative margins are insufficient alone.

Equal height divs

1 Answers1