HTML and CSS - Layout and Positioning: Arranging Elements(table,table-row, table-cell)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
• BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
• HTML (マークアップ言語)
• Cascading Style Sheets(CSS) (スタイルシート)

Head First HTML and CSS(Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media)のChapter 11(Layout and Positioning: Arranging Elements)、EXERCISE(No. 8168)を解いてみる。

EXERCISE(No. 8168)

HTML (BBEdit, Emacs)

<style>
#starbuzz_table {
    display: table;
    border-spacing: 10px;
}

.starbuzz_row {
    display: table-row;
}

#starbuzz_drinks {
    display: table-cell;
    background-color: #efe5d0;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

#starbuzz_main {
    display: table-cell;
    background-color: #efe5d0;
}

#starbuzz_sidebar {
    display: table-cell;
    background-color: #efe5d0;
}
</style>

<div id="starbuzz_table">
  <div class="starbuzz_row">
    <div id="starbuzz_drinks">
      <h1>BEVERAGES</h1>
      <p>House Blend, $1.49</p>
      <p>...</p>
      <h1>ELIXIRS</h1>
      <p>We ...
      </p>
      <p>...</p>
    </div>
    <div id="starbuzz_main">
      main
    </div>
    <div id="starbuzz_sidebar">
      sidebar
    </div>
  </div>
</div>

BEVERAGES

House Blend, $1.49

...

ELIXIRS

We ...

...

main

sidebar