CSS:絶対配置による3段組の方法
ソースはこちら
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>絶対配置による３段組の方法</title>
<link href="abdolute.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>#header</h1>
</div>
<div id="wrapper">
<div id="main">
<h2>#main</h2>
</div>
<div id="sub">
<h3>#sub</h3>
</div>
<div id="extra">
<p>#extra</p>
</div>
</div>
<div id="footer">
<p>#footer</p>
</div>
</body>
</html>
CSSはこちら
/*body {
margin: 0px;
padding: 0px;
width: 700px;
height: auto;
}
#header {
background-color: #CCCCCC;
height: 100px;
width: 700px;
}
#footer {
background-color: #CCCCCC;
height: 100px;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;/*IEバグ対策*/
position: relative;
margin: 0px;
padding: 0px;
}
#main {
background-color: #FFFF99;
margin: 0px 150px;/*絶対配置の領域を左右に確保*/
height: 300px;
}
#extra {
height: 300px;
position: absolute;/*絶対配置*/
top: 0px;
right: 0px;
background-color: #66FFFF;
width: 150px;
}
#sub {
background-color: #66FFCC;
position: absolute;/*絶対配置*/
left: 0px;
top: 0px;
width: 150px;
height: 300px;
}
</body>
</html>
