web creators 2008年10月号の巻頭特集に寄稿したネタの中から、サンプルを紹介してみよう企画、第1弾。
ネタ概要は本を買って誌面で見てね＾＾というところなので、ここでは書きません。

ネガティブマージンを使って段組みにしたサンプル

ポイントは、ある要素の上marginをマイナスにすることにより、レイアウトをずらして直前の要素に重ねているところ。

サンプルでそれをしているのは、見出しとリンクボタンが横並びになっているところなのですが、サンプルを見れば分かる通り、両方とも画像です。

上にレイアウトをずらしているに過ぎないので、テキストなどの縦幅が可変の要素が中に入っていると、フォントの異なる環境での閲覧や、文字サイズ変更などによって、後続のレイアウトに影響が出ます。そんなわけで、縦幅可変になる要素のレイアウトにはあまり向いてません。

何だかここまで書くと、絶対配置でいいような気がしますね＾＾；floatも絶対配置も使いたくない、けれども段組にしなきゃならない、というレアなケースで活躍する・・・かもしれません・・・。