title: How is a CSS "display: table-column" supposed to work?
body: <p>Given the following HTML and CSS, I see absolutely nothing in my browser (Chrome and IE latest at time of writing). Everything collapses down to 0x0 px. Why?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          section { display: table; height: 100%; background-color: grey; }
  
          #colLeft { display: table-column; height: 100%; background-color: green; }
          #colRight { display: table-column; height: 100%; background-color: red; }
  
          #row1 { display: table-row; height: 100%; }
          #row2 { display: table-row; height: 100%; }
          #row3 { display: table-row; height: 100%; }
  
          #cell1 { display: table-cell; height: 100%; }
          #cell2 { display: table-cell; height: 100%; }
          #cell3 { display: table-cell; height: 100%; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
          &lt;div id="colLeft"&gt;
              &lt;div id="row1"&gt;
                  &lt;div id="cell1"&gt;
                      AAA
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="row2"&gt;
                  &lt;div id="cell2"&gt;
                      BBB
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="colRight"&gt;
              &lt;div id="row3"&gt;
                  &lt;div id="cell3"&gt;
                      CCC
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>