XGAサイズのレイアウトを決定するには
ウィンドウ幅1024ピクセル以上の場合、メインコンテンツの要素幅を730ピクセル、サイドバーの要素幅を160ピクセルにし、メインコンテンツとサイドバーとの間隔も追加した全体幅を求めた上で、floatプロパティを使って2段組みにする方法について説明します。
概要
ウィンドウ幅1024ピクセルの場合に#page_contentと#sidebarをfloatプロパティで2段組み表示にするように定義してみましょう。ページコンテンツの要素にビックバナーが収まるように要素幅が730ピクセル、その左右の余白が10ピクセル、ページコンテンツとサイドバーとの間隔を15ピクセル空けることとし、サイドバーの要素を160ピクセル、その左右の余白をそれぞれ10ピクセルキープするようにレイアウトを決定する場合、合計全体幅が945ピクセルになります。
※#page_content と #sidebar のボックス内余白はそれぞれ、.article クラススタイルと .aside クラススタイルでもって左右マージン10ピクセルが基本スタイルで定義されていることを前提とします（参考：『セクション用のDIVのスタイルを作成するには』）。
- 10+730+10=750 ・・・・ #page_content 幅
- 10+160+10=180 ・・・・ #sidebar 幅
- 15 ・・ #page_content と #sidebar との隙間
- 750+180+15=945・・.wrapperと.container幅
メディアクエリの最小幅は、合計全体幅に25ピクセルを加算すると問題ないでしょう。
古いブラウザーでも段組みを表示できるようにする
なお、.wrapper クラススタイルでは、古いブラウザーでも段組みをうまく表示できるように、インラインブロックとして表示します。なくてもいいかもしれませんが、その要素のスタイルとの兼ね合いでうまく表示できなかったので、インラインブロックの呪文を与えています。
floatプロパティで段組みレイアウトを実装する
#page_content は左側に配置（float:left）、#sidebar は右側に配置（float:right）にして、それぞれ角丸スタイルにしています。角丸スタイルはCSS 3の一種なので古いバージョンでは表現できませんが、スタイル上の問題なので私は特に気にしていません。
ちなみに、左側にメニュー、右側にメインコンテンツを配置させたい場合は、逆に#page_content は右側に配置（float:right）、#sidebar は左側に配置（float:left）するとOKです。
最後に、.articleと.asideボックスが下がらないように上部のパディングを-10pxにしています。あと、上下のマージンも念のため0ピクセルにしてます。
CSSファイルでのコード
@media(min-width:970px){
.container{
width:945px
}
.wrapper {
display: inline-block;
*display: inline;
*zoom: 1;
width: 945px;
margin-bottom: 10px;
margin-top:10px;
}
#page_content {
margin: auto 0px;
width: 750px;
float: left;
}
#sidebar {
float: right;
width: 180px;
margin: auto 0px 10px 0px;
}
#page_content, #sidebar {
border-radius: 7px;
-webkit-border-radius: 7px; /* Safari,Google Chrome用 */
-moz-border-radius: 7px; /* Firefox用 */
}
.article, .aside {
padding-top: -10px;
margin-top: 0;
margin-bottom:0
}
}
@media(min-width:970px){
.container{
width:945px
}
.wrapper {
display: inline-block;
*display: inline;
*zoom: 1;
width: 945px;
margin-bottom: 10px;
margin-top:10px;
}
#page_content {
margin: auto 0px;
width: 750px;
float: right;
}
#sidebar {
float: left;
width: 180px;
margin: auto 0px 10px 0px;
}
#page_content, #sidebar {
border-radius: 7px;
-webkit-border-radius: 7px; /* Safari,Google Chrome用 */
-moz-border-radius: 7px; /* Firefox用 */
}
.article, .aside {
padding-top: -10px;
margin-top: 0;
margin-bottom:0
}
}