この記事は「スタイルシートで段組をデザインする方法」を解説するシリーズの第3回です。 以前の記事で解説した内容については触れませんので、以前の記事をまだ読まれていない場合は、先にそちらをご参照下さい。
第1回:スタイルシートだけで段組を作る
第2回:スタイルシートだけで作る段組の例

スタイルシートだけで作る段組に起こる問題点

前回の記事「スタイルシートだけで作る段組の例」では、 段組を用いたページ構成をサンプルとして示して、その通りの段組を作る方法をご紹介致しました。
実際に試された方々はお気づきでしょうが、前回ご紹介した方法だけでは、ある問題が起こる可能性があります。

前回ご紹介したのは、下記の画像のようなページ構成です。 よくある構成ですね。

段組の例

前回ご紹介した方法だと、横に並んでいる段組の長さ(高さ)が異なる場合に問題が起こります。
たとえば、次の画像のような感じです。

長さが異なる段が横に並んだ段組の例

DよりもEの方が長い場合、Dの下側にEの内容が回り込んでしまいます。
こういうデザインでよければ問題はありませんが、tableを使ったレイアウトと同じように段組を作りたい場合は、これでは困りますね。

今回は、前回ご紹介したスタイルシートに追記して、この「段組の隣の段が下側に回り込んでしまう問題」を解決する方法をご紹介致しましょう。

隣の段が下に回り込むのを防ぐ

段組の隣の段が下側へ回り込まないようにするにはどうすれば良いでしょうか。
たった1行のスタイル記述で実現できます。

スタイルシートを使っての解答は 次のページで! →