<!-- Column #1 -->
This page is one of the demonstrations for the article Equal-height columns with CSS.
Even though CSS tables are not the preferred and professional way to do web layouts, still some people may want to use them for a robust browser support if most of their audience still use stone-age browsers.
What we have done here is simple application of CSS table properties, one the markup like below:
<div class="t-grid"> <div class="t-grid-row"> <section class="t-grid-col t-content"> ... </section><!-- .t-grid-col --> <aside class="t-grid-col t-sidebar"> ... </aside><!-- .t-grid-col --> </div><!-- .t-grid-row --> </div><!-- .t-grid -->
And the CSS would be something like below in this case:
/* The Table OR Container */ .t-grid { display: table; border-spacing: 1em; border-collapse: separate; } /* The row */ .t-grid-row { display: table-row; } /* The cell */ .t-grid-col { display: block; background-color: #fff; padding: 1rem; background-color: #ccc; vertical-align: top; } @media only screen and (min-width: 1024px) { .t-grid-col { display: table-cell; border-radius: 5px; padding: 1.5rem; border: 1px solid rgba(0, 0, 0, .1); } .t-content { padding: 2rem; width: 65%; } .t-sidebar { width: 35%; } }
Note that this is not a feasible workaround for responsive web layouts. Still I this was of some help to you. Try by yourself!