XHTMLソース

<div id="header">
 <h1><img src="img/logo.gif" alt="Sample Shop" width="150" height="62" /></h1>
 <div id="utility">
  <ul>
   <li>カート内の合計金額：¥15,750</li>
   <li><a href="cart.html"><img src="img/btn_cart.gif" alt="現在のカートの中身を見る" width="170" height="32" /></a></li>
   <li><a href="history.html"><img src="img/btn_history.gif" alt="購入履歴" width="80" height="32" /></a></li>
  </ul>
 <!--utility--></div>
<!--header--></div>
<div id="content">
 ...（略）...
<!--content--></div>

CSSソース

#header {
     position: fixed !important;
     position: absolute;
     top: 0;
     left: 0;
     width: 800px;
     padding: 0 20px;
     height: 62px;
     background: url(img/header.gif) repeat-x;
}
#header h1 {
     float: left;
     width: 150px;
     margin: 0;
     padding: 0;
}
#header #utility {
     width: 650px;
     float: right;
     text-align: right;
}
#header #utility ul {
     margin: 13px 0;
     list-style: none;
}
#header #utility ul li {
     display: inline;
     margin: 0 0 0 5px;
     color: #FFF;
}
#header #utility ul li img {
     vertical-align: middle;
     border: none;
}

• 第4章 ユーザビリティを向上させるCSSデザインの法則