サンプル

図や写真を右寄せ（左寄せ）: div100-hpi

h3，pと右寄せしたした画像を含む

テキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

ソース

XHTML
<div class="div100-hpi">
  <h3>図や写真を右寄せ（左寄せ）: div100-hpi</h3>
  <img class="figure" src="img/fg-dummy.gif" alt="figure : ダミー" width="200" height="200" />
  <p>h3，pと右寄せしたした画像を含む</p>
  <p>テキストテキスト......</p>
  <p>テキストテキスト......</p>
</div>

CSS
div.div100-hpi {
  margin: 1em 0 0;
  width: 100%;
  overflow: hidden; /* clear float */
}

div.div100-hpi h3 {
  margin: 1em 0;
  padding: 3px 10px;
  border-bottom: solid 3px #78CE7A;
  color: #363;
}

div.div100-hpi p {
  margin: 1em 0 1em 20px;
}

div.div100-hpi img.figure {
  float: right; /* 画像を左寄せにする場合は left */

  display: inline; /* for IE6,7 */
  margin: 0 0 1em 20px;
}