

外部CSSに下記のように記述し
.box-base {
width: 700px;
}
.box-header {
width: 700px;
height: 150px;
text-align: left;
}
.box-center-base {
width: 470px;
padding: 20px 20px 20px 10px;
float: left;
}
.box-center {
width: 440px;
text-align: left;
}
.box-center2 {
width: 440px;
text-align: left;
}
.box-left-base {
width: 230px;
padding: 20px 10px 20px 20px;
float: left;
}
.box-left {
width: 200px;
text-align: left;
}
HTMLのほうに
<DIV class="box-base">
<DIV class="box-header">
内容
</DIV>
<DIV class="box-left-base">
<DIV class="box-left">内容</DIV>
</DIV>
<DIV class="box-center-base">
<DIV class="box-center">タイトル</DIV>
<DIV class="box-center2">内容<DIV>
</DIV>
</DIV>
と打っているのですがなぜかcenterボックスのほうがleftボックスの右側に来ずに下に下がってしまいます。
そこで、leftボックスのほう(baseとleft)のwidthを2px減らしたら綺麗に表示されました。
でもその分の2px、隙間が開いてしまいました^^;(全体に20pxの隙間が開くはずが右だけ22pxになってしまいました)
なぜでしょうか?どなたか助言お願いします。
(CSS、HTMLには修正しています。もしこの情報だけでは判断できない場合は、修正してないものをアップします)
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
おそらくここで問題なのはwidthの値であり、widthはpaddingを含めない領域を示します。
ですので、widthを指定しているものにpaddingを設定すると、width+paddingの値が総合的な幅になります。なので、mudatekiさんの設定だと、下に落ちてしまうと思われます。(ただ、ブラウザの解釈によって違いがあり、IEの5.5以前はpaddingを含む領域をwidthと解釈してしまうようです)
なので、No,2さんのように、paddingを付ける合計が700になるように設定するとぴったりになるということです。
また、文章を構造的に考えるならば、divは区切りなどを示す値なので、全てをdivで区切るのではなく、枠としてのdiv,タイトルや内容を示すものにはh1~h6の見出しやpなどの段落としての意味付けをする事がよいと思われます。
例えばこんな感じにしてみました。
(h1~h3も、実際はフォントの大きさなどを指定します)
<DIV class="box-base">
<DIV class="box-header">
<h1>内容</h1>
</DIV>
<DIV class="box-left-base">
<h2>内容</h2>
</DIV>
<DIV class="box-center-base">
<h3>タイトル</h3>
<p class="p1">内容</p>
</DIV>
</DIV>
CSSは
.box-base {
width: 700px;
margin: 0px;
padding: 0px;
}
.box-header {
width: 700px;
height: 150px;
text-align: left;
margin: 0px;
padding: 0px;
}
.box-center-base {
width: 470px;
padding: 0px;
float: left;
margin: 0px;
height: auto;
}
.box-left-base {
width: 230px;
padding: 0px;
float: left;
margin: 0px;
}
h2 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
h3 {
margin: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 10px;
}
.p1 {
padding-top: 0px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 10px;
margin: 0px;
}
参考URL:http://www.stylish-style.com/beginer/basic/boxmo …

No.2
- 回答日時:
正しい書き方かどうかは分かりませんが・・・
便宜上色を付けてあります
.box-base {
width: 700px;
background-color: #000000;
}
.box-header {
width: 700px;
height: 150px;
text-align: left;
background-color: #ffcccc;
}
.box-center-base {
width: 470px;
float: left;
background-color: #ffffcc;
}
.box-center {
width: 440px;
margin: 20px 20px 0px 10px;
text-align: left;
background-color: #ffff00;
}
.box-center2 {
width: 440px;
margin: 0px 20px 20px 10px;
text-align: left;
background-color: #ffccff;
}
.box-left-base {
width: 230px;
float: left;
background-color: #ccffff;
}
.box-left {
width: 200px;
margin: 20px 10px 20px 20px;
text-align: left;
background-color: #00ffff;
}
No.1
- 回答日時:
どういう風にしたいのかよくわかりませんが HTML の前に strict の DOCTYPE 宣言を加えて、
CSS を大体下に挙げたような形にすれば回りこみ問題を回避でき、なおかつ異なる環境間でもほぼ同じように表示できます。
IE,Firefox,Opera などで正常に表示することが出来ました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
.box-base {
width: 710px;
float:left;
}
.box-header {
width: 700px;
height: 150px;
text-align: left;
}
.box-center-base {
width: 410px;
padding: 20px 20px 20px 10px;
float: left;
}
.box-center {
width: 410px;
text-align: left;
}
.box-center2 {
width: 410px;
text-align: left;
}
.box-left-base {
width: 230px;
padding: 20px 10px 20px 20px;
float: left;
}
.box-left {
width: 200px;
text-align: left;
float:left;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
「dt」「dd」の内容を一列で表...
-
余分な縦スクロールバーが出て...
-
widthやheightの数値に単位(px...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
float: leftで横に並べたら、サ...
-
IE・FirefoxでのCSS表示違いに...
-
z-indexで上になっている要素だ...
-
divで囲まれたpaddingの指定を...
-
定義リストに下線をつけたいと...
-
html5 2段組で行頭を揃える方法
-
【CSS】ヘッダーの高さが不明の...
-
レスポンシブコードの意味なの...
-
トップに戻るボタン、スマホだ...
-
CSSでhover時に画像変更したい
-
HTMLのiframeの入れ子について
-
CSSで背景画像を一番下にもって...
-
画像リンクの下に文字を付けた...
-
押したらへっこむボタンのアイ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
ページを拡大縮小でborderが消...
-
CSSがなぜかfont-sizeだけ効か...
-
表示倍率を変えるとレイアウト...
-
スクロールボックスを中央に配...
-
cssで文字サイズ指定、ptでもpx...
-
投稿フォームの整列
-
入力フォームとセレクトボック...
-
<div>と<div>の間の10px程の...
-
W3Cのソースコードの検証サービ...
-
CSSで「overflow:scroll」をしてい
-
ネガティブマージン
-
divで囲まれたpaddingの指定を...
-
FC2ショッピングカート 写真の...
おすすめ情報