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

質問

現在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 · ベストアンサー

今、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

CSSでfloat:left;とかもう止めて、
　CSS3の「Multi-column layout」
使ったらどうでしょう。

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

http://jintrick.net/document/2007/0901/css3_multi-column.html

http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20381452,00.htm

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