サンプルページ
この枠は可変長です。ウインドウ幅により幅が伸び縮みします。
テキスト
テキスト
この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響
この枠は可変長です。ウインドウ幅により幅が伸び縮みします。
テキスト
テキスト
この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響
・この枠は固定長です。
・テキスト
.wrap{overflow:hidden;background:#eee;width:100%;min-width:500px;}
.main{float:left;width:100%;margin-right:-180px;background:#eff;}
.mainin{margin-right:180px;word-break:break-all;background:#efe;}
.side{float:left;width:180px;word-break:break-all;background:#ffe;}
HTML部
main側
テキスト
side側
テキスト
/div>
==== 説明 ====
上記のデモとソースでは左カラムをウインドウ幅に対して可変長、右カラムを固定長としています。
説明のためフロートを解除すると次のような状態となります。
wrap - overflow:hidden;width:100%;min-width:500px
main - float:left;width:100%;margin-right:-180px;
mainin - margin-right:180px;word-break:break-all;
side - float:right;width:180px;word-break:break-all;
幅を可変にするために外側の枠warpはwidth:100%;と幅を狭めた時の最低幅(min-width:500px;)を設定する。最低幅を指定しないと幅を狭めた時に可変長の左カラム(main)が小さくなり過ぎてしまいます。またmin-width以下になった時にoverflow:hiddenで親要素に影響を与えないようにしています。
左カラムmainは左寄せフロート(float:left;)して、右側のマージンをマイナス値(margin-right:-180px;)とする事で右カラムの入る隙間を作ります。
右カラムsideは上記で空いた隙間に入る幅(width:180px;)にし、右寄せフロート(float:right;)すると横並びになります。
この状態では、左カラムmainの上に右カラムsideが重なっている状態なので左カラムmainに長い文書を書くと右カラムsideの下に隠れてしまうため左カラムmain内に調整用ブロック要素maininを作り重なっている部分を右マージン(margin-right:180px;)で調整します
右側の幅を変更する時は、mainのmargin-rightのマイナス値とsideのwidthとmaininのmargin-rightの3つを同じに
欠点は、フロートを使っているのでmain(mainin)とsideの高さがそろいません。mainやsideに背景画像やボーダーがあると気になる場合があります。
==== 右カラムを可変長にするには ====
HTML部の右カラムsideを左カラムmainの前に持ってくるのが簡単です。
メニュー
・この枠は固定長です。
・テキスト
サンプルページ
この枠は可変長です。ウインドウ幅により幅が伸び縮みします。
テキスト
テキスト
この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響
ソースコード(左右反転)
side側
テキスト
/div>
main側
テキスト
----
===== PR =====
===== table-cell =====
==== デモ ====
サンプルページ
この枠は可変長です。ウインドウ幅により幅が伸び縮みします。
テキスト
テキスト
メニュー
この枠は固定長です。
テキスト
==== ソースコード ====
CSS部
.wrap{display:table;width:100%;}
.main{display:table-cell;vertical-align:top;word-break:break-all;background:#eff;}
.side{display:table-cell;vertical-align:top;width:320px;word-break:break-all;background:#ffe;}
HTML部
main側
テキスト
side側
テキスト
テーブル化して、外枠wrapを100%とし、右カラムsideの幅を指定すると残りが左カラムmainの幅になります。
floatと違いmainとsideの内の高さが違っても、mainとsideの高さは同じになるので背景色やborderがある場合には使いやすい。
テーブルをデザイン用に使ってもよいのか？と言う構造部分の問題はあるもののシンプルで動作的には問題ないと思う。
==== 右カラムを可変長にするには ====
HTMLのmainとsideの順番を入れ替えるだけです。
side側
テキスト
main側
テキスト