Vertical alignment of bootstrap 3 panel elements in CSS (without flexbox)

Question

I am trying to align three "panel" elements (from bootstrap 3).

________________        _____________
|   Panel A    |        |   Panel C  |
|              |        |            |
|______________|        |            |
________________        |            |
|   Panel B    |        |            |
|              |        |____________|          
|______________|

I would like the tops of panels A and C to be aligned, as well as the bottoms of panels B and C.

TOP
------------------
Panel A    Panel C

BOTTOM
------------------
Panel B    Panel C

These panels currently contain images, but they can contain any dynamic content – so the height cannot be known in advance. Additionally, since this html page needs to be responsive, the images within these panels are automatically resized (with the img-responsive class) based on the width of the viewport.

When the window is resized the size of the vertical gap between the bottoms of Panel B and C changes.

Here's a screenshot of this in action:

And with a different window width:

Here is the JSFiddle that I set up for this problem: https://jsfiddle.net/mfurlend/qsc9ajgx/

And less usefully, an embedded code snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row toprow">
    <div class="col-xs-12 col-sm-3 col-sm-push-9">
      <div class="panel panel-default">
        <div class="panel-heading">Panel C</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12">
              <img src="http://placehold.it/320x240" class="img-responsive img-thumbnail center-block img-rounded">
            </div>
            <div class="col-xs-12">
              <img src="http://placehold.it/320x240" class="img-responsive img-thumbnail center-block img-rounded">
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-9 col-sm-pull-3">
      <div class="panel panel-default">
        <div class="panel-heading">Panel A</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-4">
              <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240">
            </div>

            <div class="col-sm-4">
              <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240">
            </div>
            <div class="col-sm-4">
              <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240">
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Panel B</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-2">
              <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240">
            </div>
            <div class="col-xs-2">
              <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240">
            </div>
            <div class="col-xs-2">
              <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240">
            </div>
            <div class="col-xs-2">
              <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240">
            </div>
            <div class="col-xs-2">
              <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240">
            </div>
            <div class="col-xs-2">
              <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240">
            </div>
          </div>
        </div>

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

I was able to achieve the desired effect using Flexbox, but I need a solution that is compatible with older browsers. I'd rather the solution be pure CSS - but JS will do as a last resort.

Here is a JSFiddle that I set up demonstrating the intended behavior using Flexbox: https://jsfiddle.net/mfurlend/q97x655o/

I'd first suggest you research equal height columns in Bootstrap...then go from there. = http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Paulie_D, Apr 04 '16 at 21:35
I have done that - and I saw the solutions presented in that post, but I had trouble adapting them to my code structure. — Mike Furlender, Apr 04 '16 at 21:40

score 0 · Answer 1 · answered Apr 05 '16 at 01:35

I guess this might be of a good start. This is what Paulie_D linked implemented to your code: https://jsfiddle.net/qsc9ajgx/4/ The trick is:

  margin-bottom: -99999px;
  padding-bottom: 99999px;

added to the columns within an overflow:hidden row.

Is this what you were looking for?

Vertical alignment of bootstrap 3 panel elements in CSS (without flexbox)

1 Answers1