みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

現在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;
}

投稿日時 - 2010-11-18 16:05:55

QNo.6327859

困ってます

質問者が選んだベストアンサー

今、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をつけてみてください。
文章構造的にはこっちのほうが良い気がします。

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

投稿日時 - 2010-11-20 00:19:20

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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/

投稿日時 - 2010-11-19 12:16:02

あなたにオススメの質問