国道58号線をのんびりと行く

WordPressのサイドバー 三段組のメインを先に持ってくるCSS
というのをいい加減やってみた。
前々からやらなきゃと思っていたのですがCMSのワードプレスはほとんどのテーマがindex.php（single.php,archive.phpなども）とsidebar.phpが分かれているので所謂メインコンテンツと右メニューを一括りにして、その後に左メニューを配置するという、定番ワザが使えない。
SEOは後回しでとにかくコンテンツ作りってやってたら、もうDIVとか訳分からなくなってしまい。。。
ということで次のWordpress用にメモ。
サイトの全体幅を1000px、メインコンテンツを600px（左右のMarginを10px取るので正味580px）、左右のサイドバーを200pxとしてみる。

HTMLソースは以下のような感じで作成。

<div id="wrap">
	<div id="header">
		ヘッダー。ロゴとかH1とか。
	</div>
		<div id="content">
			<div id="center">
				メイン記事
			</div>
			<div id="leftbar">
				左サイドバー
			</div>
			<div id="rightbar">
				右サイドバー
			</div>
		</div>
	<div id="header">
		フッター。コピーライトとか。
	</div>
</div>

このソースに合うようにCSSを作成していく。

#content {
width: 1000px;
text-align: left;
margin:0px;
padding:0px;
background-color: #CCCCCC;
}

#center {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #FFFFFF;
overflow: hidden;
}

#leftbar {
position:relative;
float: left;
left:-800px;
width: 200px;
height:100%;
margin:0px;padding:0px;
background-color: #CCCCCC;
overflow: hidden;
}
#rightbar {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #CCCCCC;
overflow: hidden;
}