ブログを３カラム右右から左右両サイドにしたい。

現在CSSは下記のようになっています。
どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。

宜しくお願い致します。

/** 03. Layout - レイアウトの設定 */
/* ----------------------------------------------- */

body {
margin: 0;
padding: 0;
min-width: 960px;
text-align: center;
background-image: none;
background-repeat: repeat;
background-position: 50% top;
}

div#containerWrap {
width: 960px;
margin: 0 auto 5px;
}

div#container {}

div#content {
padding: 10px 0;
border-width: 1px;
border-style: solid;
}

div#main
, div#sub
, div#extra {
overflow: hidden;
}

div#main {
float: left;
display: inline;
width: 538px;
}

div#main div.column-inner {
padding: 0 10px 10px;
}

div#sub {
float: left;
display: inline;
width: 210px;
}

div#sub div.column-inner {
padding: 5px 10px 0;
overflow: hidden;
border-width: 1px;
border-style: none none none solid;
}

div#extra {
float: left;
display: inline;
width: 210px;
}

div#extra div.column-inner {
padding: 5px 10px 20px;
overflow: hidden;
border-width: 1px;
border-style: none none none solid;
}

No.2 ベストアンサー 回答者： amuamu00 回答日時： 2010/11/20 00:19

今、htmlの入れ子状態を簡単に記述すると下記のようになっていると思います。

<div id="containerWrap">
<div id="content">
<div id="main"></div>
<div id="sub"></div>
<div id="extra"></div>
</div></div>

（xx-inner等一部省いています。）

まず、mainとsubの位置を逆にするのが一番簡単な方法です。

次に簡単だと思われるのは、mainとsabの外にもうひとつdivを作ります。

<div id="containerWrap">
<div id="content">
<div id="samplecolumn">
<div id="main"></div>
<div id="sub"></div>
</div><!--/samplecolumnの閉じタグ-->
<div id="extra"></div>
</div></div>

その上で、mainのfloatをrightに変更し、samplecolumnに
widthやfloatleftをつけてみてください。
文章構造的にはこっちのほうが良い気がします。

ちょっと細部は確認していないので、間違っていたらごめんなさい。

No.1 回答者： yyr446 回答日時： 2010/11/19 12:16

CSSでfloat:left;とかもう止めて、

　CSS3の「Multi-column layout」
使ったらどうでしょう。

（参考サイト）
http://www.w3.org/TR/2007/WD-css3-multicol-20070 …

http://jintrick.net/document/2007/0901/css3_mult …

http://builder.japan.zdnet.com/sp/css-firefox-sa …


従来どおりのなら、↓に載ってる。
http://css.uka-p.com/