フォルダ
CSSで左右は固定、中央は可変の3カラムレイアウト
- 公開日：2016/2/26
この記事は最終更新日から3年以上が経過しています。
簡単そうで、意外と悩んだのでメモしておく。
こちらの記事を参考にさせていただきました。
引用元：【CSS】3カラムレイアウト-左右は固定幅、中央は残りの幅目一杯に広がるレイアウト
悩んでしまったのは、3カラム、左右は固定幅で、中央は残った幅いっぱいに広がってほしいレイアウトをcssで実現する方法。
ポイントは、
- 中央をひとつ余分にdivで囲う（
#mainの中に#content） - 3カラム全てに
float: left;を指定 #mainはwidth: 100%;#contentは左右の幅だけmarginを指定- 左側は
widthとmargin-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;
}