html - Getting a table to stack properly with other divs -

i've seen similar questions nothing comprehensive addresses specific issue; if there's thread somehow missed apologize in advance.

so have kind of multi-part issue , solution first part has created second issue.

i have 4 column layout in contents need maintain same height uniformly, this:

the second , 4th boxes here have background color , height needs stay @ same height other two, images. surest way can find make happen mark table , set cell height 100%, 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, new &#39;vette? kid&#39;s still got, oh, 96 97 thousand, depending on 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, new &#39;vette? kid&#39;s still got, oh, 96 97 thousand, depending on options.</p>     <p class="text-center"><a class="currenturl" href="">continue reading</a></p>    </div>    </td>   </tr>  </tbody> </table> 

this solved first problem quite created new one. subsequent content add below markup gets "overran" table above it, ("not desired" what's happening):

so question is, there reliable way mitigate this? assumed table behave similar block element , stack accordingly, not seem case. in advance advice, if it's needlessly harsh word accompanied link preexisting thread addresses issue!

::edit::

i did not include of css because it's unlikely of having impact on this, if seems necessary understand issue comment , i'll add in.

::edit 2::

per requests, adding css here though, said, it's setting background colors , 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> 

ok, after lot of inspecting in dev tools, able find problem. not included in markup not part of markup built cms working inside of.

the preceding div had "max-height" setting on pixel value. because of this, pushing table content content below it. there have it; simple solution lying right outside view.