【CSS】左右横方向に移動させる<float>

HTMLページの段組レイアウトを決める際に、HTMLページにてブロックを左右に浮かせて配置する際に<float>プロパティがよく使われます。

<float>プロパティはブロックレベル要素(Block Element)、例えば <div>、<img>、<table>、<p>、<ol>、<ul>にのみ使用可能です。

<float> 属性
none	指定しない。(初期値)
left	指定した要素を左に寄せる。次の要素はその右側に回り込む。
right	指定した要素を右に寄せる。次の要素はその左側に回り込む。

中央に寄せる[middle]のような属性ありません。まず<float>プロパティを使わず、段組レイアウト作成時に使われる<div>要素でブロックを配置させて見ます。

<html>
<head>
<style>
 #block {
	width:160px; 
	height:100px;
	background-color:red;
  margin-bottom:2px;
  }
</style>
</head>
<body>
 <div id="block">BLOCK_A</div>
 <div id="block">BLOCK_B</div>
 <div id="block">BLOCK_C</div> 
</body>
</html>

ブロックレベル要素である<div>は前後に改行が入り、また<float>プロパティを持ってない場合、幅が100%を使うため、次に来るブロックは自動改行で下に降りてブロックが上下に配置されます。

BLOCK_A

BLOCK_B

BLOCK_C

では、<div>要素との組み合わせでブロックを左側/右側に寄せる例です。

<style>
 #left {
	width:160px; 
	height:100px;
	background-color:red; 
	float:left;
  }

 #right {
	width:160px; 
	height:100px;
	background-color:green; 
	float:right;
  }
</style>

<float>プロパティが「left」あるいは「right」の属性を持つ場合、次に配置されるブロックはその下に配置されるのではなく、その横に配置されます。

「float:left」で宣言した場合、第1ブロック(LEFT_A)の次にくるブロック(LEFT_B)はその右(後)に回りこみます。

LEFT_A

LEFT_B

RIGHT

逆に「float:right」で宣言した場合、第1ブロック(RIGHT_A)の次にくるブロック(RIGHT_B)はその左(前)に回りこみます。

<body>
 <div id="left">LEFT_A</div>
 <div id="right">RIGHT_A</div>
 <div id="right">RIGHT_B</div> 
</body>

LEFT_A

RIGHT_A

RIGHT_B

次に、よく見かけるホームページのレイアウト、「ヘッダー」と「サイドばー」「メイン」を作ってみます。

<!doctype html>
 <head>
 　<title>CSS | レイアウトの配置</title>
 　　<style>
#header
{	height:74px;
	background-image: url("top.gif"); 

}
#side_bar {
	width:30%; 
	height:100px;
	background-color:red; 
	float:left;
}

#main {
	width:70%; 
	height:100px;
	background-color:blue; 
	float:left;
}
 　　</style>     
 　</head>

また<body>～</body>には実際ホームページに表示されるコードを入れます。<div id="idセレクタ名">～</div>の形でコーディングします。

 <body>
 　 <div id="header">HEADER</div>
 　 <div id="side_bar">SIDE BAR</div>
 　 <div id="main">MAIN</div>
 </body> 
</html>

HEADER

MAIN