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

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

解決済みの質問

HTMLで横幅をCSSで設定できません。

HTMLで横幅をCSSで設定できません。

headerを作成しているのですが、画像のように横幅が外枠の
wrapperをはみ出して表示されてしまいます。
はみ出した値は5pxとpaddingで指定した値と一致します。

headerをtableタグで作成した場合、横幅700pxの枠中での
padding-left:5px;になり、横幅には変化はありません。

しかし、<div id="header">で横幅を700pxとし、
padding-left:5px;とすると、headerの横幅が
5px増えてしまいます。

<div id="header">の横幅を変化させずに、
paddingを指定することは可能なのでしょうか。
わかる方いらっしゃいましたら宜しくお願い致します。


■HTML
<html>
<body>
<div id="wrapper">
<div id="header"></div>
</div>
</body>
</html>

■CSS
#wrapper {
width: 700px;
}
#header {
width: 700px;
padding-left: 5px;
}

投稿日時 - 2010-02-24 16:04:50

QNo.5702800

すぐに回答ほしいです

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

ブロックの幅ってのはwidth+padding+border-widthですから、(テーブルは異端)
境界線が無いとしてheaderのwidthを数値で指定するなら適正値は695pxです。
違う値を書いておいて、それをなんとかしていってのは結構無茶。
変に値を書くより、width:auto≒widthを省略、が最もすっきりすると思いますが。

例えばそれがどうしてもいじれない場所に書いてあるなら、再定義するとか。
#header {
width: 700px;
padding-left: 5px;
}
以下を追記して値を上書きする。
#header {
width: 695px;
}

投稿日時 - 2010-02-24 16:33:37

補足

width:autoとした場合、自動設定されるのですが、
widthの大きさはどこと同じに合わせられるのでしょうか。

投稿日時 - 2010-02-24 18:25:08

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

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

回答(3)

ANo.3

div#header {
width: 100%;
padding-left: 5px;
}
でよいはず。

投稿日時 - 2010-02-26 17:02:02

補足

回答有難うございました。
XHTMLで作成していますができませんでした。
wrapperの700px+padding-left: 5px;=705pxになります。

投稿日時 - 2010-02-26 19:23:29

ANo.2

上の指定は、正しいですが。
下の指定は、ブラウザにより表示方法が異なりますが。
Safariでは、705pxの横幅になりますよ。
上記のため、下の指定は使用していません。

投稿日時 - 2010-02-25 16:47:23

あなたにオススメの質問