<!-- Column #1 -->

A two-column web layout using CSS Table properties

Featuring Equal, auto-heighted columns

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!

Follow