ここではfloatで作る2段組(センター揃え)を解説します。
センター揃えとは表示領域がウィンドウの中央に位置しているものです。今でこそ左端を基準にしたサイトというものは増えてきていますが、仕事をしているとセンター揃えのサイトを作ることは結構あります。
ご存知のとおり大元となるdivに対してmargin-leftとmargin-rightをautoにしてあげることでセンター揃いになりますが、Windows Internet Explore5や5.5はこのauto指定が効きません。そこでどうすればいいかというとbodyに対してtext-align: centerと指定することでこの問題を解消することができます。
bodyにtext-aling: centerと指定することは是非が問われるところだと思いますが、今のところ一番現実的な解決方法化と思いますので、下記にソースを記述しておきます。
(X)HTML部分
[html]
<div id="wrapper">
<div id="header"><br /><br /></div>
<div id="primary"><br /><br /><br /></div>
<div id="secondary"><br /><br /><br /></div>
</div>
[/html]
CSS部分
[css]
body {
margin: 0;
padding: 0;
font-size: 75%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
line-height: 1.4;
color: #333333;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
width: 760px;
margin: 0 auto;
}
header {
height: 40px;
background-color: #FFD0B0;
}
#primary {
float: right;
width: 560px;
background-color: #F7FFF0;
}
#secondary {
float: left;
width: 200px;
background-color: #EEFEFF;
}
[/css]
このままだと各コンテンツの中はセンター揃いになってしますので、各エリアの指定にtext-aling: leftを追加してあげることでこの問題は解決することができます。ここでは<div id=”head”> や<div id=”primary”> 、<div id=”secondary”> になります。注意点として、<div id=”wrapper”> にtext-aling: leftと指定するとFirefoxでは全体が左によってしまいます。
。
floatで作る3段組(センター揃え)のサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。