2カラムの片方を固定・可変にする方法

このエントリーをはてなブックマークに追加

先日のエントリーで 『max-width がイメージと違う動きをする？ width と max-width と float を理解する』 というのを書いたのですが、２カラムで片方が横幅固定、もう一方が可変幅で作りたい時には別の作りが必要と書いていたとおりに、もう少し工夫が必要となります。

今回は、そのカラムで片方を横幅固定、もう一方を可変幅にする方法を確認してみます。

片方固定、もう一方が可変のイメージ

片方を固定にするポイントは、ネガティブマージンを活用するところです。固定する方には固定サイズのwidthを、可変にする方は最低でも２重の枠を設け、外側で固定サイズ分のネガティブマージン、とwidth: 100%、ネガティブマージンをつけたブロックの内側で固定サイズ分のマージンを指定することで実現可能です。

以前の、 SaCSS vol.51 で @mori_ko も紹介していた方法です。

HTML

<div class="demo-block">
  <div class="demo-wrapper">
    <div class="demo-side">
      <p>固定</p>
    </div>
    <div class="demo-main">
      <p>可変</p>
    </div>
  </div>
</div>

CSS

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-side {
  float: left;
  width: 240px;
  background: #ccc;
}

.demo-demo-main {
  float: left;
  widh: 100%;
  margin-left: -240px;
  background: #16a085;
}

.demo-demo-main p {
  margin-left: 240px;
}

左240pxの固定、右可変デモ

固定

可変

ブラウザを伸縮すると、緑の背景部分のみサイズが変わります。

今回上記のように書いた方法以外にも、tableを利用する方法などもありますが、ちょっと工夫してネガティブマージンを利用してみてはいかがでしょうか？