2カラムレイアウト(メインリキッド+サイド固定幅)
html
<html>
<body>
<div id="side"></div>
<div id="main-container">
<div id="main"></div>
</div>
</body>
</html>
css
#side {
float: left;
width: 200px;
}
#main-container {
float: left;
width: 100%;
margin-left: -200px;
}
#main {
margin-left: 200px;
}
解説
- #sideと#main(#main-container)の2カラム構成にする。
- #sideと#main-containerを共にfloat:leftする。
- #sideは固定幅200pxにする。
- #main-containerはリキッドにする為にwidth:100%にする。
- が、このままでは#main-containerは下に落ちるので、magin-left:-200pxとネガティブマージンを指定して左マージンを空ける。
- さらに#main-container内の#mainにmargin:left200pxを指定して、左マージンを元に戻す。
- #main内にメインコンテンツを記述する。
