HTML5 的 CSS 排版

本排版的關鍵樣式表

main {
  display:table-cell;  
}

aside {
    width:20%;
    float:left;
    display:table-cell;
}

參考:

1. section 和 article 的分別請參考 http://stackoverflow.com/questions/7549561/section-vs-article-html-5
2. main 和 aside 的區分採用 display:table-cell; http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space-a-very-simple-but-annoyi
3. HTML5 語意元素的配置 1 -- http://www.w3schools.com/html/html5_semantic_elements.asp
4. HTML5 語意元素的配置 2 -- http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
5. HTML5 語意元素的配置 3 -- http://www.expression-web-tutorial.com/Structural-Semantic-Elements.html#.VP_gDvmUdNc