safariやFirefoxで右のカラムが下へ行ってしまう

質問

CSSで
A
B C
D
という4つのカラムでレイアウトしたいので下記のようなCSSにしました。
------------------------------------------------
#A{
width:700px;
}
#B{
float:left;
padding-top: 15px;
width: 150px;
height: 100%;
}
#C{
float:right;
text-align: left;
width: 550px;
padding: 15px 50px 30px;
}
#D{
position:relative;
width:100%;
height:50px;
clear:both;
text-align:center;
}
------------------------------------------------
IEでは問題ないのですが、safariやFirefoxでは
A
B
C
D
となってしまい、BとCが並んでくれません。
Cはテキストのみなので画像等のサイズオーバーでカラム落ちしているわけではなさそうです（長いURLなどもありません）
Cのfloat:right;を消すと並んでくれるのですが、そうするとどういう訳かpaddingの指示が無視されてピッタリくっついてしまいます。
IEよりもsafariの方がCSSでは正しいそうなので何か間違っているのだと思うのですが、どなたかご教授ください。

回答No.1

lostmanweb · ベストアンサー

初めまして。
FireFoxやsafariなどの正規表現に忠実なブラウザでは
──────────────────────────
width(550px)＋padding(50px)＝実際に表示される横幅
──────────────────────────
となります。
つまり、#Aの横幅に対して#B＋#Cの値の方が大きくなってしまっているので、結果として、収まらなかった#Cが下に追いやられてしまっている、という具合です。

対処法としては
──────────────────────────
<div style="横幅を指定">
<div style="余白を指定">内容物</div>
</div>
──────────────────────────
このように相性の悪いプロパティは、各要素に対して一つずつ指定する事で全てのブラウザに対応出来ます。

お礼

ありがとうございます。
widthとpaddingが足される物だとは知りませんでした。
無知でお恥ずかしい限りです。

<div style="横幅を指定">
<div style="余白を指定">内容物</div>
</div>

というのは…
一つのカラムに対して2つの指定をしてやるということなのでしょうか？

回答No.3

noname#56882

#2です。
> 一つのカラムに対して2つの指定をしてやるということなのでしょうか？
はい。そういうことです。
「width:550px;」の数値を変更せず「padding:15px 50px 30px;」を生かすために
こういう設定をしています。

［スタイルシートによる崩れない　2カラム　3カラム・レイアウト］
http://desperadoes.biz/style/dan/
上記のサイトがとても参考になりますので、もしよろしければどうぞ。

お礼

ありがとうございます。
ようやく意味がわかりました！
脱テーブルにチャレンジしてるのですがまだまだ壁は多そうです(^^;)
またなにかございましたらご教授ください。

回答No.2

noname#56882

No.1さんが書かれているように「padding: 15px 50px 30px;」の設定で崩れています。
http://www.htmq.com/style/padding.shtml
「上に15pxの余白、左右に50pxの余白、下に30pxの余白」と設定してしまうと
550pxだけでは足りなくなってしまうため、プラス「50px×2」を追加しないといけません。
（#Aの部分も700pxでは足りなくなり崩れてしまう原因になります。）

CSS記述例
*{margin:0; padding:0;}
#my_body{/* 画面を小さくしても崩れない設定 */
width:700px;
background-color:#ddd;/* 色はテストのためつけています */
}
#A{
width:100%;/* #my_bodyで700pxの設定をしているのでここでは100%で */
height:50px;/* 高さは任意 */
background-color:#ccb;/* 色はテストのためつけています */
}
#B{/* height:100%;は取っていますがつけてくださっても構いません */
float:left;
width:150px;
padding-top:15px;
}
#C{
float:left;
width:550px;
background-color:#ddd6bb;/* 色はテストのためつけています */
}
#C2{/* #Cで設定されていたpaddingと文字の左寄せをここで設定しています */
padding:15px 50px 30px;
text-align:left;
}
#D{
clear:both;
width:100%;
height:50px;/* 高さは任意 */
text-align:center;
padding:1em 0;/* 文字の位置は任意 */
background-color:#ccb;/* 色はテストのためつけています */
}

HTML記述例
<div id="my_body">
<div id="A"></div>
<div id="B">テキスト</div>
<div id="C">
<div id="C2">長いテキスト分</div>
</div>
<div id="D">テキスト</div>
</div>

で書きましたところ、IE6とFirefoxでは正確に表示されました。

お礼

ありがとうございます。
widthとpaddingが足される物だとは知りませんでした。
無知でお恥ずかしい限りです。

せっかく丁寧に教えてくださったのに
当方あまりに知識がないためこんぐらがってます(^^;)

#C
#C2
と2つあるのはのは…
一つのカラムに対して2つの指定をしてやるということなのでしょうか？