CSS段組み？で右カラムを右寄せにするには？

質問

説明が難しいのですが・・・
テーブルレイアウトでいえば、下記のHTMLで実現できるような表示方法を、
tableタグを使わずに実現したいです。

<table style="width: 100%;"><tr>
　<td>左パーツ</td>
　<td style="text-align: right;">右パーツ</td>
</tr></table>

divタグに float: left; を付けると、２つのdivブロックを横並びに配置できますが、
右側にあるdivにtext-align: right;を付けても、左寄せになってしまいます。
※width未指定なので当たり前なのですが・・・

ただ、今回の場合は実際にマルチカラムを実現したいわけではなく、
上記コードでいうところの左パーツを画面の左端へ、
そして右パーツを画面の右端に表示させたいだけです。
左右それぞれの横幅は特定していません。

どなたか分かる方、教えて下さい。

回答No.1

yambejp · ベストアンサー

こういうことですか？

<div style="text-align:right;float:right;">右パーツ</div>
<div style="text-align:left;float:left;">左パーツ</div>
<div style="text-align:center;">本文</div>

お礼

回答ありがとうございます。
右パーツにはfloat: right;を付ければ良かったんですね・・・
基本が理解できてなかったみたいです。
助かりました。

回答No.2

k0021

No1さんの回答であっていますが

<div style="text-align:right;float:right;width:50%;">右パーツ</div>
<div style="text-align:left;float:left;width:50%;">左パーツ</div>
<div style="text-align:center;clear:both;">本文</div>

width:は、お好み大きさを指定して下さい。

本文にclear:both;(テキストの回り込みを 両側の回りこみを解除)
指定した方が良いと思います。

IEでは、問題なくてもSsfari等MACプラウザでは、問題が発生する可能あります。

IEでは、問題なくてもSsfari問題が発生した写真を添付します。

お礼

補足の回答ありがとうございます。
ブラウザの違いは注意しなければなりませんね・・・