IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

CSSで左右は固定、中央は可変の3カラムレイアウト

簡単そうで、意外と悩んだのでメモしておく。

こちらの記事を参考にさせていただきました。
引用元:【CSS】3カラムレイアウト-左右は固定幅、中央は残りの幅目一杯に広がるレイアウト

悩んでしまったのは、3カラム、左右は固定幅で、中央は残った幅いっぱいに広がってほしいレイアウトをcssで実現する方法。

ポイントは、

  • 中央をひとつ余分にdivで囲う(#mainの中に#content
  • 3カラム全てにfloat: left;を指定
  • #mainwidth: 100%;
  • #contentは左右の幅だけmarginを指定
  • 左側はwidthmargin-left: -100%;を指定
  • 右側はwidthを指定し、widthと同じpx数をmargin-leftにマイナス値(=ネガティブマージン)で指定
<div id="wrapper">
    <div id="main">
        <div id="content">中央コンテンツ</div>
    </div>
    <div id="left">左サイド</div>
    <div id="right">右サイド</div>
</div>
#wrapper {
    height: 500px;
    min-width: 600px;
}
#main {
    height: 500px;
    width: 100%;
    float: left;
}
#content {
    background-color: #FF6600;
    margin-right: 200px;
    margin-left: 150px;
    height: 500px;
}
#left {
    background-color: #0099FF;
    float: left;
    margin-left: -100%;
    width: 150px;
    height: 500px;
}
#right {
    background-color: #00CC33;
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 500px;
}

1週間でLPICの基礎が学べる本 第2版

体系的に学ぶ 安全なWebアプリケーションの作り方[リフロー版] 脆弱性が生まれる原理と対策の実践

スッキリわかる SQL 入門 ドリル215問付き!

改訂 FuelPHP入門

はじめてのフレームワークとしてのFuelPHP 改訂版