2カラム+ナビゲーション
foatを使ってレイアウトを崩さないために
ポイントはliにfloatをつけたため、widthを入力している。また、liを囲んでいる大外の#navにもwidthを設定してレイアウト崩れを防ぐ。
また、floatのものにmarginはつけずに外枠のものにつけること。
#content・#sidebarにfloatがついているので#wrapperのサイズを#containerのwidth800pxから
marginの両サイド40pxを引いてwidth760pxにして#wrapperの両サイドにぴったりとつくように設定した。
#footerには#content・#sidebarのfloatに引きずられて浮き上がらないようにclear:bothを設定。
画像はこちら↓
http://web-clilin.jimdo.com/?logout=1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Traditional//EN" "http://w3.org/TR/html14/loose.dtd">
<html lang="ja">
<head>
<meta http-equive="Content-type" content="text/html; cearset=utf-8">
<title>test3.14</title>
<style type="text/css">
<!--
*[HTML][HTML][HTML][HTML] {
margin: 0;
padding: 0;
}
body {
font-size: 0.875em;
font-family:
"Hiragino Kaku Gothic pro",
"ヒラギノ 角ゴ Pro.W3",
Meiryo,
"メイリオ",
Osaka,
"MS P Gothic",
"ＭＳ Ｐゴシック",
sans-serif;
background-color: #C3C3C3;
margin: 2em;
}
div#container {
width: 800px;
height: auto;
background-color: #FFFFFF;
margin: 20px;
}
div#header {
width: 800px;
height: 150px;
background-color: #FEEFFF;
}
div#nav {
width: 800px;
height: 40px;
}
div#nav ul {
font-weight: bold;
list-style-type: none;
color: #FFFFFF;
display: inline;
text-align: center;
}
div#nav ul li {
width: 159px;
line-height: 40px;
font-weight: bold;
background-color: #92B283;
display: inline;
float: left;
border-left: 1px solid #FFFFFF;
}
div#nav ul li a {
display: block;
}
div#nav ul li a:link,div#nav ul li a:visited {
color: #FFFFFF;
text-decoration: none;
}
div#nav ul li a:hover {
color: #FFFFFF;
background-color: #00008B;
text-decoration: underline;
}
div#wrapper {
width: 760px;
height: 245px;
background-color: #FFFFFF;
margin: 20px;
}
div#content {
width: 600px;
height: 245px;
background-color: #FAFDD4;
float: left;
}
div#sidebar {
width: 140px;
height: 245px;
background-color: #E0FCFF;
float:right;
}
div#footer{
width: 800px;
height: 50px;
background-color: #FFD5CB;
clear: both;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">ここにheader内容が入る</div>
<div id="nav">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">ここにcontent内容が入る</div>
<div id="sidebar">ここにsidebar内容が入る</div>
</div>
<div id="footer">ここにfooter内容が入る</div>
</div>
</body>
</html>
