2カラム
2カラムのレイアウトを作る方法です。
HTMLは次のようにします。
<div id="container">
<div id="main">
Main Column
</div>
<div id="sub">
Sub Column
</div>
</div>CSSは次のようにします。
#container {
clear: both;
/* #mainのwidth + #subのwidth */
width: 960px;
}
#main {
/* サイドバーが左の場合に書く */
float: right;
/* サイドバーが右の場合に書く */
float: left;
width: 720px;
}
#sub {
float: left;
width: 240px;
}widthは適当な値に変更して下さい。
3カラム
3カラムのレイアウトを作る方法です。中央にメインコンテンツ、左右にサイドバーがあるレイアウトを想定しています。
HTMLは次のようにします。
<div id="container">
<div id="wrapper">
<div id="main">
Main Column
</div>
<div id="sub">
Sub Column
</div>
</div>
<div id="extra">
Extra Column
</div>
</div>CSSは次のようにします。
#container {
clear: both;
/* #mainのwidth + #subのwidth + #extraのwidth */
width: 960px;
}
#wrapper {
float: left;
/* #mainのwidth + #subのwidth */
width: 800px;
}
#main {
float: right;
width: 640px;
}
#sub {
float: left;
width: 160px;
}
#extra {
float: left;
width: 160px;
}widthは適当な値に変更して下さい。