Position - Web design

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" 
lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<meta http-equiv="Content-Style-Type" 
content="text/css" />
<title>両側をまたぐフッターを配置する</title>
<style type="text/css">
<!--
body {
    text-align: center;
}

#cotainer {
    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: 0;
    top: 0; 
    width: 200px;
    background-color: #F9CFBA;
}

#footer {
    background-color: #DDDDDD;
    height: 50px;
}

-->
</style>
</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>

position: relative

・その要素本来の位置（左上）からの移動距離
・領域は確保し後続には影響しない。
・margin: left/rightを利用する事によって通常の配置位置から相対的にずらして配置が可能。

position: absolute

・包含ブロック（左上）からの移動距離。
・領域は詰められ、後続に影響する。
・親Boxのうちで一番近い層のBoxを起点とする