Getting a table to stack properly with other divs

Question

I've seen some similar questions to this but nothing really comprehensive that actually addresses this specific issue; if there's a good thread about this already that I somehow missed I apologize in advance.

So I have kind of a multi-part issue and my solution for the first part has created the second issue.

I have a 4 column layout in which the contents need to maintain the same height uniformly, something like this:

The second and 4th boxes here would have a background color and the height needs to stay at the same height as the other two, which will be images. Currently the surest way I can find to make this happen is to mark it up like a table and set the cell height to 100%, like so:

<table>
 <tbody>
  <tr>
   <td style="width: 25%;">
   <figure><img alt="" class="img-responsive" src="http://lorempixel.com/1000/1000/business" /></figure>
   </td>
   <td class="bg-brand-dark" style="height: 100%; width: 25%;">
   <div class="block-padding-hor">
   <h3 class="text-inverse h6"><strong>Featured Corporate News</strong></h3>

   <hr class="rule-part--bright center-block" />
   <p class="text-inverse h6">Hardly Dude, a new &#39;vette? The kid&#39;s still got, oh, 96 to 97 thousand, depending on the options.</p>

   <p class="text-center"><a class="currentURL" href="">Continue Reading</a></p>
   </div>
   </td>
   <td style="width: 25%;">
   <figure><img alt="" class="img-responsive" src="http://lorempixel.com/1000/1000/business" /></figure>
   </td>
   <td class="bg-gray-dark" style="height: 100%; width: 25%;">
   <div class="block-padding-hor">
   <h3 class="text-inverse h6"><strong>Featured Corporate News</strong></h3>

   <hr class="rule-part--bright center-block" />
   <p class="text-inverse h6">Hardly Dude, a new &#39;vette? The kid&#39;s still got, oh, 96 to 97 thousand, depending on the options.</p>

   <p class="text-center"><a class="currentURL" href="">Continue Reading</a></p>
   </div>
   </td>
  </tr>
 </tbody>
</table>

This solved my first problem quite well but created a new one. Any subsequent content that I add below this markup gets "overran" by the table above it, like so ("not desired" is what's currently happening):

So my question is, is there a good reliable way to mitigate this? I just assumed a table would behave similar to a block element and stack accordingly, but this does not seem to be the case. Thanks in advance for any advice, even if it's a needlessly harsh word accompanied by a link to a preexisting thread that addresses this issue!

::EDIT::

I did not include any of the CSS because it's unlikely any of it is having an impact on this, but if it seems necessary to understand the issue just comment and I'll add it in.

::EDIT 2::

Per requests, adding the CSS here though, like I said, it's mostly just setting background colors and centering things:

<style>
  .img-responsive {
    max-width: 100%;
  }


  .bg-brand-dark {
    background-color: #004892;
  }


  .block-padding-hor {
    padding-left: 30px;
    padding-right: 30px;
  }


  .rule-part--bright {
    border: 2px solid #08b5fe;
    width: 50%;
  }


  .center-block {
    margin: 0 auto;
  }


  .text-inverse {
    color: #ffffff;
  }


  .h6 {
    font-size: 13px;
  }


  .text-center {
    text-align: center;
  }

  .bg-gray-dark {
    background-color: #4D4F53;
  }

</style>

Answer 1

Tables have traditionally been the reliable way to create layouts of equal height columns.

However, since the advent of CSS Flexbox, the same behavior can be achieved with minimal code and greater flexibility.

There are several ways to establish equal height columns with flexbox:

1. Use the flex-grow property
   This property specifies what amount of space the item should take up within the flex container. With flex-grow: 1 (or the flex: 1 shorthand), the boxes will always occupy all available space in the flex container. This keeps boxes equal height regardless of content size or quantity.

2. Use the align-items property.
   This property controls how flex items distribute available space along the cross axis. The default value is stretch, which expands the flex item along all available space. This keeps boxes equal height because each will stretch the height of the container by default.

3. Use the min-height property on the flex container.

HTML

<article id="container">
    <section class="box">1</section>
    <section class="box">2</section>
    <section class="box">3</section>
    <section class="box">4</section>
</article>

CSS (excluding ornamental styles)

#container {
    display: flex;
    justify-content: space-around;
    min-height: 250px;
}

.box {
    display: flex;
    flex-direction: column;
    width: 20%;
    min-height: 200px;
    box-sizing: border-box;   
    overflow: auto;
}

.box:nth-child(even) {
    background-color: aqua;
}

DEMO

In the demo, what ever amount of content (images included) is put into one box, will result in sibling boxes taking the same height.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

Answer 2

Ok, so after a lot of inspecting in the dev tools, I was able to find the problem. This was not included in my markup as it was not a part of my markup but built into the cms that I was working inside of.

The preceding DIV had a "max-height" setting on it with a pixel value. Because of this, it was pushing the table content into the content below it. So there you have it; a simple solution that was just lying right outside my view.