CSSを使って3カラムにしたいのですが・・・。

質問

現在CSSを使って、2カラムのページを作っています。
これを今回3カラムにしようとしているのですが、うまく並んでくれません。

現在はA.Bというボックスを作って並べています。左からA.Bとします。最初にBのボックスを読み込ませたいので最初にBを書いて、次にAを持ってきて左に来るようにさせています。ですので見た目はABと並んでいますがソースはBAとなっています。

そこで今回Cというボックスを一番右に持ってこようと奮闘しているのですが、AとBの間にきたり、変な一番上のほうに表示されたりして、一番右に来てくれません。

どこにどのような記述をすれば、一番右にもう1個表示できるようになるでしょうか？？

回答No.2

buffalomasa · ベストアンサー

divで3つのパートを作ります。

<div id="a">
</div>
<div id="b">
</div>
<div id="b">
</div>

あとはCSSで

#a {
　float : left;
}
#b {
　float : left;
}
#c {
　float : right;
}

を作るだけです。
widthなどは適宜設定して下さい。

お礼

なるほどです！

シンプルに考えて見ます、ただ先にBを読み込ませるのでココはrightですかね？？

回答No.4

ao_

まず現在あるA・Bを一つのdivでくくりleft-columnとでもid名を付けます。そのleft-columnとC（新しいdiv）それぞれにfloat:feft、float:rightとすればうまくいくはずです。

お礼

みなさんありがとう御座います。

無事3カラムが完成いたしました。あとなぜか変な設定でパディングが100になっていて、うまく表示が出来ないという問題もありました。なんでだろー？？

本当にありがとう御座いました。

回答No.3

noah716

No..２さんの方法でいけると思います。

私も今、同じようなことを勉強しているところで、
いろんなサイトを探しましたが、以下のサイトが一番わかりやすかったのでＵＲＬをはっておきます。

参考URL：

http://www.cybergarden.net/webcss/technique.html#nontable

回答No.1

yy_y

以前，3カラムのページ作成で，W3Cの次のページを参考にしました．
英語ページですが，ある程度英語がわかればとても有用だと思います．

Tableless layout HOWTO
http://www.w3.org/2002/03/csslayout-howto

参考URL：

http://www.w3.org/2002/03/csslayout-howto

お礼

yy_yさんありがとう御座います。

・・・英語ですか、英語は分かりません。