CSS - 2カラム レスポンシブ デモ

• float未使用、替わりににdisplay:table;とdisplay:table-cell;を使用
• 幅600px以下は段組みが解除され、すべて100%幅に
• 段組時は指定の幅以下にはならない。（デモでは右300px固定+左600以上の900pxを最低にしている、つまり左枠はどの状況でも600px以下にはならない設計）

横幅を変化させると表示が変わります。

HTML部

    
    <div class="wrapper">
      <div class="head">
        <p>ヘッダー</p>
      </div>
      <div class="columu">
        <div class="left">
          <p>左側</p>
          <p>左側</p>
          <p>左側</p>
        </div>
        <div class="right">
          <p>右側</p>
          <p>右側</p>
          <p>右側</p>
          <p>右側</p>
        </div>
      </div>
      <div class="foot">
        <p>フッタ</p>
      </div>
    </div>
    

CSS部

    .wrapper{
      margin: 0 auto; /* 左右センタリング */
      width:90%;
      min-width:900px; /* 900px 以下には縮小できない */
    }
    .head{
      background:#eee;
      overflow:hidden; /* marginによる空白削除 */
    }
    .columu{ /* 段組み用 */
      display:table;
      width:100%;
    }
    .left {
      display:table-cell;
      background:#bfb;
    }
    .right {
      display: table-cell;
      width:300px; /* 右枠は幅300px固定 */
      background:#bbf;
    }
    .foot{
      background:#eee;
      overflow:hidden; /* marginによる空白削除 */
    }


    /* 幅600px以下の場合は段組み解除 */
    @media screen and (max-width:600px){
      body{
        margin:0px;
      }
      .wrapper{
        width:100%;
        min-width:600px; /* 600px 以下には縮小できない */
      }
      .columu{
        display:block;  /* 段組み解除 */
      }
      .left{
        display:block;  /* 段組み解除 */
        width:100%;
        overflow:hidden; /* marginによる空白削除 */
      }
      .right{
        display:block;  /* 段組み解除 */
        width:100%;
        overflow:hidden; /* marginによる空白削除 */
      }
    }
    

• 全体の幅はwrapperのmin-widthで最低幅を指定し、最大幅は未指定のため最低幅以上はブラウザの横幅に追従。
• 右側の幅はrightのwidthで幅を固定しているので、ブラウザの横幅には追従しない
• 左側の幅は未指定なので、wrapperの幅－右側のwidthの値となりブラウザの横幅に追従。

http://www.achiachi.net/