Making inner div heights 100% with css in a table-cell

Question

I have a table/table-row/table-cell layout and I want the inner div heights to align. i saw this post: height: 100% for <div> inside <div> with display: table-cell which asks the same question, but i can't seem to get the same results with my code.

I have a JS solution, but was really hoping to not need it.

My question is: How can I make the nkda box the same height as the other two using only css?

here is a js fiddle http://jsfiddle.net/a1opo1kd/

html

<div class="forum-tag-summaries">

  <dl class="tags-rows">
    <div class="row tags-row">
      <div id="tag-wrapper-2" class="tag-wrapper" data-row="0" data-ftg_id="2" data-i="0">
        <div class="alert alert-info" id="ui-id-1">
          <dt>
            <div class="fl" title="Created 1 year ago by Mr Peter GEE">
              clinical
            </div>
            <button class="btn btn-xs btn-edit ml-5">
              <span class="fa fa-pencil">
              </span>
            </button>
            <div class="fr text-muted">
              x&nbsp;2
            </div>
          </dt>
          <br>
          <dd>
            <div class="text-muted view" title="">
              Clinical questions relating to medication reviews.
            </div>
            <div class="edit hidden text-muted">
              <textarea data-id="2" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
                Clinical questions relating to medication reviews.
              </textarea>
            </div>
          </dd>
      </div>
  </div>
  <div id="tag-wrapper-6" class="tag-wrapper active" data-row="0" data-ftg_id="6" data-i="1">
    <div class="alert alert-info" id="ui-id-2">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr Peter GEE">
          nkda
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          no known drug allergies
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="6" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
            no known drug allergies
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  <div id="tag-wrapper-3" class="tag-wrapper" data-row="0" data-ftg_id="3" data-i="2">
    <div class="alert alert-warning" id="ui-id-3">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr user 1">
          RMMR
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="3" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  </div>
  <div class="row tags-row">
    <div id="tag-wrapper-4" class="tag-wrapper" data-row="1" data-ftg_id="4" data-i="0">
      <div class="alert alert-warning" id="ui-id-4">
        <dt>
          <div class="fl" title="Created 2 days ago by Mr user 1">
            hypertension
          </div>
          <button class="btn btn-xs btn-edit ml-5">
            <span class="fa fa-pencil">
            </span>
          </button>
          <div class="fr text-muted">
            x&nbsp;1
          </div>
        </dt>
        <br>
        <dd>
          <div class="text-muted view" title="">
            <span class="text-danger">
              This tag does not have a description, please enter one!
            </span>
          </div>
          <div class="edit hidden text-muted">
            <textarea data-id="4" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
            </textarea>
          </div>
        </dd>
      </div>
  </div>
  <div id="tag-wrapper-5" class="tag-wrapper" data-row="1" data-ftg_id="5" data-i="1">
    <div class="alert alert-warning" id="ui-id-5">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr user 1">
          poly pharmacy
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="5" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  <div id="tag-wrapper-7" class="tag-wrapper" data-row="1" data-ftg_id="7" data-i="2">
    <div class="alert alert-danger" id="ui-id-6">
      <dt>
        <div class="fl" title="Created 23 hours ago by user 1">
          test
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;0
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="7" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  </div>
  </dl>
</div>

css

    .btn-edit{background-color:transparent;}
  dl.tags-rows {
  display: table;
  height: auto;
  }
  dl.tags-rows .tags-row {display: table-row;}
  dl.tags-rows .tags-row .tag-wrapper {
      display: table-cell;
      height: 100%;
      width: 33%;
      min-width: 33%;
      padding: 5px;}
  .ml-5{margin-left:5px;}
  .fl{float:left;}
  .fr{float:right;}

example screenshot

Answer 1

It's very simple. In your case this is all you need:

dl.tags-rows {
    display: table;
    height: 1px; /* IE fix, any small height */
}

.alert {
    display: inline-table;
    height: 100%;
    width: 100%;
    vertical-align: top;
}

Demo: http://jsfiddle.net/a1opo1kd/5/

Answer 2

The only thing you can do with CSS is to:

1. Make a container for the three <div>s
2. Set the height to whatever the biggest <div>'s height is
3. Set the container's position to "relative".
4. Set the <div>'s heights to 100%.

I hope this helps!