CSSでの段組みをもう少し考える
mixiのCSSコミュニティで質問が続いていたのでちょっと考えてみた。
<?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" lang="en" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;CHARSET=UTF-8" />
<title>columnSample</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#contents {
position: relative;
}
#left {
position: absolute;
top: 0;
width: 185px;
background: #aaf;
}
#center {
margin: 0 185px;
background: #faa;
padding: 5px;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 185px;
background: #afa;
}
#top, #bottom {
background: #99f;
}
.box {
width: 150px;
height: 150px;
background: #f66;
float: left;
}
</style>
<script type="text/javascript">
<!--
function getHeight() {
var center = document.getElementById("center");
var left = document.getElementById("left");
var right = document.getElementById("right");
if (center.offsetHeight < left.offsetHeight && center.offsetHeight > right.offsetHeight) {
contentsHeight = center.offsetHeight
} else if (left.offsetHeight > right.offsetHeight){
contentsHeight = left.offsetHeight
} else {
contentsHeight = right.offsetHeight
}
document.getElementById("contents").style.height = contentsHeight + "px";
}
// -->
</script>
</head>
<body onload="getHeight();">
<div id="top">hoge</div>
<div id="contents">
<div id="center">
<div class="box">hoge</div>
<p >hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge</p>
<p style="clear:both;">hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge</p>
<p>hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge</p>
<p>hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge</p>
<p>hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge</p>
<p>hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge</p>
</div>
<div id="left">
<p>hoge hoge hoge</p>
<p>hoge hoge hoge</p>
<p>hoge hoge hoge</p>
<p>hoge hoge hoge</p>
<p>hoge hoge hoge</p>
</div>
<div id="right">
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
<p>hoge hoge hoge hoge</p>
</div>
</div>
<div id="bottom">hoge</div>
</body>
</html>
Windows XP SP2では、ローカル環境でJavascriptを実行するときにブロックがかかるため、ローカルでの動作の確認はできません。どっかのサーバにアップするか、ローカルにwebサーバの環境を作ってそこにHTMLを置いてから確認してください。
基本的には以前作ったpositionを使ったカラムの作成方法と変わりはないが、絶対位置の指定配置した要素はそれ移行の要素から無視されるため、javascriptを使って各カラムの高さを出して最も高いカラムに強制的に全体の高さを合わせるようにしてみた。
カラムの位置指定にpositionを使う事で、各カラム内でfloatを使っても表示が崩れる事がないので、レイアウトに幅を持たせる事ができるだろう。きっと。