[CSS] divのみで可変幅の高さが揃った縦の三段組: fjiブログ

2011年6月22日 (水)

[CSS] divのみで可変幅の高さが揃った縦の三段組

昨日に引き続き、さらに表示方法を発展させた「divのみの可変幅で高さが揃った縦の三段組」を作ってみました(￣▽￣ )ゞすなわちページ幅一杯まで伸縮する縦の三段組です。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。

header

1
2
3

1
2
3
4
5
6

1
2
3
4
5
6
7
8
9
10

footer

ソースコードは、次の通り。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>可変幅で高さが揃った縦の三段組</title> <style type="text/css"></style> </head> <body> <div id="page"> <div id="header">header</div> <div id="columns"> <div id="side1" class="side1 float">1<br>2<br>3</div> <div id="side2" class="side2 float">1<br>2<br>3<br>4<br>5<br>6</div> <div id="main" class="main">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div> </div> <div id="cborder"><div class="side1 float"><br></div><div class="side2 float"><br></div><div class="main"><br></div></div> <div id="footer">footer</div> </div> </body> </html>

CSS内で、先頭に"_"を付けているプロパティ(ソースでは_widthや_display)は、IE6のみに作用するプロパティとなります。
またページ最小幅を600pxとしていますが、min-widthと_widthを削除してwidth:800pxと宣言しなおせば、前回記事とほぼ同じ表示となりますが、IE6で動作させた場合のみ縦組左右の余白が若干広くなります。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just_2.html(別ウィンドウ表示)

「divのみで縦横可変幅の縦の三段組」へ続く。

■関連過去記事
・divのみで縦の三段組(高さ揃え)

HTML・CSS・JS関連 | 固定リンク
Tweet