段組をスタイルシートで作ってみよう、という記事なんですが、前回のものには大事なことを書き忘れていました。
3つの段のdiv要素にfloatを指定するのですが、その下に来る、すなわち段組ではない要素にはclearを指定してあげねば回り込みが続いたままになってしまいます。下に続く要素のIDがfootとすれば、こうなります。
div#foot {
width: 960px;
clear: both;
}
clearのパラメータにbothを指定していますので、左右の回り込みを解除します。
さてここで、前日の課題、「段の高さが異なると背景や境界が不揃いになる」という問題の解決ですが、いろいろ調べてみましたところ、
短くなる段の背景に合わせた高さ1pxのグラフィックを用意して、それをwrapperの背景に指定する。
といったものが多かったです。どれが短くなるかわかっている、2段である、という場合にはよいのですが、3段になると使えません。3段分の背景グラフィックを用意するという方法もありそうですが、あまりこのような力業は好きではありません。
絶対に、グラフィックなんぞを使わずに済む方法があるはずだ！と思ったらありました。反面、非常にトリッキーなのですが、実際にやってみましたらあっけなくできましたので、書いておきます。
3つの段に相当するdiv要素に、以下のように付け加えます。
div#left, div#center, div#right {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
下端のパディングを最大に、そして下端の境界をマイナス方向に最大に、という指定なのですが、これがどのような効果をもたらすかはわかりません。ですが実際にやってみると、それぞれの段に指定した背景や境界線が、最も高い段に合わせて伸びてくれます。これは具合がよいです。
ですが！冒頭の画面のように、段組の下に続く要素に境界線が突き出て見えてしまいます。これはどうも、上記のスタイル設定の影響でしょうが、これでは困ります。というか、こうならないために、解決方法はきちんと用意されていました。
wrapperにoverflowを指定します。
overflow: hidden;
溢れた分を隠す、という指定ですね。これで消えます。
ほかにも何か設定が必要だったような気がするのですが、とりあえずこれで問題なく表示できています。見る側から見れば、何のメリットがあるの？という話ですが、ちょっとしたこだわりと言うことで…。
コメント