« [CSS] divのみで縦の三段組(高さ揃え) | トップページ | [mixiアプリ] ハルフィとどんぐりの森 : Lv25、World5AllClear »

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




ソースコードは、次の通り。
<!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"><!-- 
html, body {margin:0px; padding:0px; height:100%;}
#page {margin:0px auto; min-width:600px;}
#page {_width:expression(document.body.clientWidth<602?"600px":"auto");}
#header {min-height:1em; margin-bottom:1px; border:1px solid #ddd;}
#footer {min-height:1em; margin-top:1px; text-align:right; border:1px solid #ddd;}
#columns {_display:inline-block; overflow:hidden;}
#cborder {height:1px; line-height:0px; overflow:hidden;}
#main {padding-bottom:32767px; margin-bottom:-32767px;}
.float {_display:inline-block; _height:32767px; padding-bottom:32767px; margin-bottom:-32767px;}
.side1 {float:left;  width:200px; margin-right:2px; border:1px solid #ddd;}
.side2 {float:right; width:200px; margin-left:2px; border:1px solid #ddd;}
.main  {_display:inline-block; border:1px solid #ddd; overflow-x:hidden;}
--></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のみで縦の三段組(高さ揃え)

|

« [CSS] divのみで縦の三段組(高さ揃え) | トップページ | [mixiアプリ] ハルフィとどんぐりの森 : Lv25、World5AllClear »

HTML・CSS・JS関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: [CSS] divのみで可変幅の高さが揃った縦の三段組:

« [CSS] divのみで縦の三段組(高さ揃え) | トップページ | [mixiアプリ] ハルフィとどんぐりの森 : Lv25、World5AllClear »