Two Column » Clan Wallace

Two Column CSS Table Code

The markup required to achieve this layout is a parent container and two child containers. Any block-level elements will do. It is the class names that are important.

Structure

<section class="css-table">
  <h3>TITLE</h3>
  <article class="col main round">
    <h4>TITLE</h4>
    <p>PARA</p>
  </article>
  <aside class="col round">
    <h4>TITLE</h4>
    <p>PARA</p>
  </aside>
</section>

Presentation

A media query can be used to switch from a one column layout to the two column layout. You will need to decide what is the best breakpoint for your particular design but it should be around the point where the width exceeds an ideal reading line length. 40em (640px) feels right for this layout.

@media screen and (min-width: 40em) {
  /* Set the parent container as a CSS table */ 
  .css-table {
    width: 100%; /* Fluid width */
    display: table;  
    border-spacing: .6em;
  }
  /* Set the child containers as CSS table columns */  
  .col {
    display: table-cell; 
    padding: 0 2%;
  }

  .main {
    width: 65%; /* fluid 2/3rds width */ 
  }
  /* No need to set width for column two. It will use remaining width */

}

Compatibility

Check support for CSS Table display and you will see no support for IE7 and below. To fix this, we could use floats in the IE only style-sheet and use the * hack to target IE7 and below. You would need to clear these floats.

/* Over-ride parent to be an inline container */ 
.css-table { 
  *width: auto;
  *display: inline; 
}

.col{ /* Float all columns to the left */ 
  *float: left;
  *width: 24%; 
  *display: inline;
}

However, this fix was not needed in this design because IE8 and below are only receiving a basic layout.

Full-Height Column Backgrounds

Many sites use floats and have to resort to Faux Columns in order to achieve full-height backgrounds for the columns. With CSS Tables, no hacks are necessary. Let's make a couple of adjustments to the inherited properties to see how easy we can add full height backgrounds

Overriding with Class-names

Here, two new class names are added to the 40em media query. One for the first column width, the other for a bit of styling (embedded style-sheet). We also add the round class to get a rounded, shadowed box. It would be easy to make adjustments to other properties, such as adjusting column gaps.

<!-- Structure -->
<section class="css-table">
  <h3>Class Overrides</h3>
  <section class="col left50">
    <h4>Main Title</h4>
    ...
  </section>
  <aside class="col round myBox">
    <h4>Information</h4>
    ...
  </aside>
</section>

/* Presentation */
@media screen and (min-width: 40em) {
  .left50 {
    width: 49%;
  }
  .myBox {
    background: #fff0d6;
  }
}

/* Legacy IE Browser Compatibility */
@media screen and (min-width: 40em) {
  .left50 {
    *width: 45%;
  }
}