2カラムレイアウトの概要とスタイルシート
１カラムレイアウトで作成したソースを引き継いで、2カラムレイアウトに挑戦します。
１カラムレイアウトの時は、コンテナの中に、ヘッダ、コンテンツ、フッタと３つのグループを作成しました。
今度は、2カラムレイアウトの実現のため、サイドバーというグループを１つ追加作成します。
レイアウトは以下の図のようになります。
コンテンツ部分の右横にサイドバーが追加されていることがわかります。
このサイドバーの横の長さを250pxにします。全体の（コンテナの）横の長さは750pxですから、
コンテンツ部分の横幅は500pxとなります。
スタイルシートにこの変更を適用させてみましょう。
コンテナ、ヘッダ、フッタ部分に変更は無いので割愛します。
・
・
#content {
float:left;
width:440px;
padding:30px;
background-color:#ffffff;
}
#sidebar {
float:right;
width:250px;
}
・
・
※コンテンツの横の長さがwidth:500pxではなく、width:440pxとなっているのは、次の行でpadding:30pxと指定しているためです。1カラムレイアウト作成の時に余白の設定をしていました。
※padding:30px;の意味は、コンテンツ部分の上下左右に余白を30px設定するという意味でした。したがって、左の余白30px、右の余白30px、あわせて60pxを500pxから引いた値（440px）となっています。
paddingやmarginなどのプロパティを使用していない状態であれば、素直にwidth:500px指定でOKです。
サイドバーを右側に、コンテンツ部分を左側に設置するために、上記ソースの中で『float』プロパティを使用しています。コンテンツ側では、float:leftで左側、サイドバー側では、float:right;で右側に配置される仕組みとなっています。（floatに関するくわしい説明は後述します。）
これでスタイルシートの編集はいったん終了です。
次回は、メインページのテンプレートにサイドバーの部分を追記します。
次のページ ＞＞ メインページのテンプレートの修正と画面確認