●コンテンツ内容

●CSSを利用した段組み[2]

 「CSSを利用した段組み[1]」とほとんど同じですが、違う点は2つのdiv要素(ブロック)に float: leftを指定していることです。その場合、2つ目の div要素の左マージンの基点は、ページ左端ではなく、左div要素となることです。

※ここのブロック(ボックス)に10pxの左マージン(margin)を設けています。つまり、左ブロックと右ブロックとの間に10pxのすき間があることになります。

【CSS】↓

#waku1 {
  float: left;
  border: solid 4px #ff00ff;
  width: 200px;
}
#waku2 {
  float: left;
  border: solid 4px #008000;
  width: 50%;
  margin-left: 10px;
}

【HTML】↓

<div id="waku1">divの要素内容</div>
<div id="waku2">divの要素内容</div>

【解説】↑↓

 この指定方法の欠点はブラウザの幅を狭めると右ブロックが左ブロックの真下に潜り込んでしまうことです。なお、ブラウザの種類によるバグはありません。(特定の古いブラウザのみバグあり。)

※3つ目の div要素に float: leftを指定すると3つの段組みができます。

 XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2005-2007 http://www.xml.vc/