段組を理解するためのサンプルコード

CSS

これをいじり倒しましょう

<!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=Shift_JIS" />
<title>sample site</title>
<!--<link rel="stylesheet" href="test.css" type="text/css" />-->
<style>
div{
	border: solid 2px;
}
div#header{
	background-color: #ddd;
}
div#sub{
	color: #fbb;
	background-color: #06c;
}
div#main{
	color: #abc;
	background-color: #fc0;
}
div#footer{
	color:#000;
	background-color: #ddd;
}
</style>
</head>

<body>

<div id="header">
header
</div>

<div id="sub">
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub
subsubsubsubsubsubsubsub

</div>

<div id="main">
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
mainmainmainmainmainmain
</div>
<div id="footer">
footer
</div>

</body>
</html>