htmlで片側可変・片側固定の2カラムレイアウトにする2つの方法。

CSS部

.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部

<div class="wrap">
  <div class="main">
    <div class="mainin"><h1>main側</h1><p>テキスト</p></div>
  </div>
  <div class="side"><h1>side側</h1><p>テキスト</p>/div>
</div>

上記のデモとソースでは左カラムをウインドウ幅に対して可変長、右カラムを固定長としています。

説明のためフロートを解除すると次のような状態となります。

幅を可変にするために外側の枠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の前に持ってくるのが簡単です。

ソースコード(左右反転)

<div class="wrap">
  <div class="side"><h1>side側</h1><p>テキスト</p>/div>
  <div class="main">
    <div class="mainin"><h1>main側</h1><p>テキスト</p></div>
  </div>
</div>

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部

<div class="wrap">
  <div class="main"><h1>main側</h1><p>テキスト</p></div>
  <div class="side"><h1>side側</h1><p>テキスト</p></div>
</div>

テーブル化して、外枠wrapを100%とし、右カラムsideの幅を指定すると残りが左カラムmainの幅になります。

floatと違いmainとsideの内の高さが違っても、mainとsideの高さは同じになるので背景色やborderがある場合には使いやすい。

テーブルをデザイン用に使ってもよいのか？と言う構造部分の問題はあるもののシンプルで動作的には問題ないと思う。

HTMLのmainとsideの順番を入れ替えるだけです。

<div class="wrap">
  <div class="side"><h1>side側</h1><p>テキスト</p></div>
  <div class="main"><h1>main側</h1><p>テキスト</p></div>
</div>

ここは旧トップページ＞日曜プログラミング