【CSSテクニック】要素下合わせ

【CSSテクニック】要素下合わせ
2012年01月12日（木）

こんにちわ。
ホームページ制作部　姿です。

今回はちょっとしたテクニックのご紹介。
既知の方はスルーの方向でお願いします。

HTML作ってて、たまにこんな場面に遭遇することありませんか？
以下の図の様に、画像の下合わせでテキストのボックスを入れるレイアウトを作らないといけないとき！

下合わせかよ…　しかも「ダミーテキスト」の部分のテキスト増えたら自動で高さも変えたいとか…

うーーーーーん、どうしよう…（。。；）

こんなときに使えるのが、CSSのposition「absolute」と「relative」の合わせ技。
以下の様にすると上手く下合わせになります。

<div style=”position:absolute;”>
　　<div style=”position:relative;”>
　　　　<div style=”position:absolute;bottom: 0;”>
　　　　　　ダミーテキストダミーテキストダミーテキスト
　　　　</div>
　　</div>
</div>

ちょっとdivが多いですね（汗）
ちなみに一番最初のposition:absoluteのdivボックスは、省略してもFirefoxとかで大丈夫そうな雰囲気を出してくれますが、IE6で駄目になります。
相変わらず駄目な方向のベクトルで優秀です、IE6。

マリンロード実績紹介で紹介されています、お客様のサイトにも使われています。
HTML/CSS解析できる方はそちらも併せてご確認ください。

■東京インテリア様
http://www.tokyointerior.co.jp/recruit/
※スタッフさんの写真部分、黒背景色のテキストボックス部分が今回と同じ技法で作られています。