position/display

CSS

position: absolute;
親要素にrelativeがなければブラウザの左上が基準になる。

display: inline;
インライン要素のように横並びにする。

HTMLファイルの記述は以下の通り

<!DOCTYPE HTML>
<html lang="ja">
<meta charset="UTF-8">
<meta http-equiv="ContentStyle-type" content="text/css">
<head>
<title>テンプレート</title>
<style>
<!--
body {
	background-color: #B82456;
}
div#container {
	width: 700px;
	background-color: #FFFFFF;
	margin: 0 auto;
	position: relative;
}
div#header {
	height: 100px;
	background-color: #FFCCCC;
}
div#wrapper {
}
div#content {
	width: 480px;
	height: 300px;
	padding: 0 0 0 20px;
	background-color: #FFFFCC;
	position: absolute;
	top: 100px;
	left: 200px;
}
div#sidebar {
	width: 200px;
	height: 300px;
	background-color: #CCFF99;
}
div#footer {
	height: 100px;
	background-color: #EEEEEE;
}
div#sidebar p { 
	margin: 0;
	padding: 0;
	line-height: 0;
}
div#sidebar p.banner img {
	border-style: none;
}
div#sidebar p.banner a{
	display: block;
	margin-bottom: 10px; /*margin: 0 0 10px 0;でも同じ */
}
ul#block1 li{
	display: inline;
}
ul#block2 li{
	display: block;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">
<p>インライン化したリンク</p>
<ul id="block1">
<li><a href="page1.html">リンク１</a></li>
<li><a href="page1.html">リンク２</a></li>
<li><a href="page1.html">リンク３</a></li>
</ul>
<p>ブロック要素化したリンク</p>
<ul id="block2">
<li><a href="page1.html">リンク１</a></li>
<li><a href="page1.html">リンク２</a></li>
<li><a href="page1.html">リンク３</a></li>
</ul>
</div>
<div id="sidebar">
<p class="banner"> <a href="index.html"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></p>
<p class="banner"><a href="index.html"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a>
</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>