HTML and CSS - Layout and Positioning: Arranging Elements(image, logo, div, float)

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. 8297)を解いてみる。

EXERCISE(No. 8297)

HTML (BBEdit, Emacs)

<style>
#starbuzz_header_slogan {
    float:right;
}
</style>

<div id="starbuzz_header">
  <div id="starbuzz_header">
    <img id="starbuzz_header_logo" alt="Starbuzz Coffee logo image"
         src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XOrk4oubGtfZV5ffJLANzmUubRp-5MXETZvZXeAK1nArY6QF4TP6K01j7JeUb3GUvKayANNijUfrH2vcQoVyrrtchwuQR8gNMNt1_Z6CXJqjiA_r3HzVbWi8soEvwrsunD_OkB8d_q3/s1600/headerLogo.gif" />
    <img id="starbuzz_header_slogan"
         alt="Providing all the caffeine you need to power your life."
         src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWHROIfKTqnupQ9w8ZHayABc6xMMZ1v_IYAmB8TSLvesNyJFpbtI8ujHMyM2ynLiXIv4j0cec9uFv2DzRB_Jq9HteGoYo72Bb23DPUzAb7zTmR_P1Fu2od9Yi4bD1CBoud4oG9iv9m8IYY/s1600/headerSlogan.gif" />
  </div>
</div>