positionを使ったレイアウト

positionとは

positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する
positionプロパティで指定するのは、配置方法（基準位置）のみ

static	特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative	相対位置への配置となります。 positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute	絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed	絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

position: relative（相対的）

その要素本来の位置（左上）からの移動距離

position: absolute（絶対的）

包含ブロック（左上）からの移動距離

実例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>両側をまたぐフッターを配置する</title>
<link rel="stylesheet" href="style1.css" media="screen, print">
</head>
<body>
<div id="container">
<div id="header"><br></div>
<div id="wrapper">
<div id="primary"><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="secondary"><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
<div id="footer"><br></div>
</div>
</body>
</html>

@charset "UTF-8";

body {
	text-align: center;
}
#container {
	width: 760px;
	margin: 0 auto;
	text-align: left;
}
#header {
	background-color: #DDDDDD;
	height: 50px;
}
#wrapper {
	position: relative;
	margin: 10px 0; /* 上下方向に10pxのマージンを指定 */
	width: 100%; /* ボックスの幅を指定 */
}
#primary {
	/* positionの指定を削除 */
	margin-left: 210px; /* 左方向に210pxのマージンを指定 */
	background-color: #C7D5ED;
}
#secondary {
	position: absolute;
	left: 0px;
	top: 0px; /* 上方向からの配置位置を変更 */
	width: 200px;
	background-color: #F9CFBA;
}
#footer {
	background-color: #DDDDDD;
	height: 50px;
}

実践

header内ブロックを右側に配置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>position</title>
<link rel="stylesheet" href="css/style.css" media="screen, print">
</head>
<body>
<div id="container">
<div id="header">
<div id="header_info">
<ul>
<li><a href="#">このサイトについて</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="primary">
<br><br>
</div>
<div id="secondary">
<br><br>
</div>
</div>
</div>
</body>
</html>

@charset "utf-8";

#container {
		width: 780px;
		height: auto;
		overflow: auto;
		margin: 0 auto;
		position: relative;
		background-color:#999;	
}
#header {
	height: 80px;
	margin: 10px;
	background-color: #F4E2FB;
}
#header_info {
	font-size: 0.8em;
	width: 360px;
	position: absolute;
	right: 20px;
	top: 30px;
}
#header_info li {
	display: inline;
	margin: 0 0 0 10px;
}
#wrapper {
	height: 300px;
	margin: 10px;
	position: relative;
	background-color: #F4ECD2;
}
#primary {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 530px;
	height: 280px;
	background-color: #CFE9AF;
}
#secondary {
	position: absolute;
	left: 550px;
	top: 10px;
	width: 200px;
	height: 280px;
	background-color: #B9E2F7;
}