CSS　レイアウト崩れと余白について

WEBページ制作をしている途中なのですが
以下の様なコードでヘッダを作ろうと試みたところ
次のような、問題点が発生しました。

1つ目は、“baki4”で指定しているブロック要素なのですが
これが、いくらpxを大きく指定してもページの端まで行き渡りません。
必ず、ページ右に余白ができてしまいます。また、その際にそれ以上pxを指定すると
今度は、“baki4”のブロックが“baki3”や“baki2”などのブロック要素の下に回り込んでしまいます。

2つ目ですが、これはページを縮めるとレイアウトが崩れてしまいます。

不具合は、以上なのですが
自分なりに、思考錯誤しみても
原因が全くｌ掴めません。

不甲斐ないですが、ご教示して頂きたく存じあげます。

CSS
1
2
3    <style>
4    body{
5      background-color:#FFFFFF;
6      margin:0px;
7      max-width:2000px;
8    }
9    header{
10      max-width:2000px;
11    }
12    .baki1{
13      float:left;
14      border-top-style:solid;
15      border-top-color:gold;
16      background-color:#000000;
17      text-align:left;
18      color:gold;
19      padding-top:50px;
20      padding-bottom:50px;
21      padding-right:30px;
22      padding-left:30px;
23    }
24    .baki1:hover{
25      background-color:gold;
26      color:grey;
27      transition:1s;
28    }
29    .baki2{
30      float:left;
31      border-top-color:gold;
32      border-top-style:solid;
33      background-color:#000000;
34      text-align:left;
35      color:gold;
36      padding-top:50px;
37      padding-bottom:50px;
38      padding-right:30px;
39      padding-left:30px;
40    }
41    .baki2:hover{
42      background-color:gold;
43      color:grey;
44      transition:1s;
45    }
46    .baki3{
47      float:left;
48      border-top-style:solid;
49      border-top-color:gold;
50      background-color:#000000;
51      text-align:left;
52      color:gold;
53      padding-top:50px;
54      padding-bottom:50px;
55      padding-right:30px;
56      padding-left:30px;
57    }
58    .baki3:hover{
59      background-color:gold;
60      color:grey;
61      transition:1s;
62    }
63    .baki4{
64      width:1500px;
65      height:124px;
66      float:left;
67      border-top-style:solid;
68      border-top-color:gold;
69      background-color:#000000;
70      </style>
71    
72

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5<title>AAA</title>
6  </head>
7  <body>
8   <hearder>
9    <div class="baki1">ITJoBs</div>
10    <div class="baki2">MeNu</div>
11    <div class="baki3">お問い合わせ</div>
12    <div class="baki4"></div>
13  </header>
14  </body>
15</html>

ご回答お待ちしております。

行動規範の内容に同意します

回答3件

CSS
1
2    .baki4{
3      width:1500px;
4      height:124px;
5      float:left;
6      border-top-style:solid;
7      border-top-color:gold;
8      background-color:#000000;
9}/* ←ここの閉じタグが抜けている */
10      </style>

投稿2016/05/25 05:50

kei344

総合スコア69398

.beki1.beki2.beki3 に左右のpadding30がついているためではないでしょうか。
ブラウザの「ボックスモデル」の解釈は文字より図解の方が理解しやすいですが、横並びに置くとき、
隣にくる要素との距離がmargin
paddingは、当のボックス（この場合.beki1.beki2.beki3）の内側にできる余白です。

全体を100％フル幅にしたい場合、たとえば２５％幅の人間が4人まで並ぶことができると思いがちですが、それは素っ裸の場合。
.beki1.beki2.beki3は、左右に30px、合計60px、着膨れする服を着ている、25％+60pxの幅のある人、となります。
その結果、4人めの人（箱）がはみ出して下に行ってしまいます。

ブラウザ、ボックスモデル、などの検索で図解付きの記事がいくつもヒットすると思いますが
http://creator.aainc.co.jp/archives/5952
など参考に。

投稿2016/05/25 04:25

StudioMic

総合スコア10

ベストアンサー

css
1body{
2background-color:#FFFFFF;
3margin:0px;
4max-width:2000px;
5}
6header{
7height:124px;
8border-top-style:solid;
9border-top-color:gold;
10background-color:#000000;
11}
12
13header>.baki{
14float:left;
15background-color:#000000;
16text-align:left;
17color:gold;
18height: 124px;
19padding-right:30px;
20padding-left:30px;
21line-height: 124px;
22}
23
24.baki:hover{
25background-color:gold;
26color:grey;
27transition:1s;
28}

html
1<header>
2<div class="baki baki1">ITJoBs</div>
3<div class="baki baki2">MeNu</div>
4<div class="baki baki3">お問い合わせ</div>
5</header>

こんな感じであってるでしょうか。

.baki1 .baki2 .baki3に対して同じ指定がされていたので、共通のclass.bakiを指定してcssの指定をまとめています。

div.bakiに対してfloat:leftが指定されていますが子要素全てにfloatを指定した場合、親要素のheaderは高さが0になってしまいますので、今回の場合は子要素div.bakiと親要素のheaderにheight:124pxと同じ高さを指定することで回避しています。

その他の方法としてはclearfixと呼ばれるテクニックが一般的です。(これは種類も沢山あり、ここで説明すると長くなるので調べてみてください。)

headerの横幅は特に指定しない限り画面一杯になるので.baki4は削除してheaderに背景色等の指定をつけたほうがいいかと思います。

それとhtmlの方のheaderの開始タグが間違っていたのでここも注意が必要です。

投稿2016/05/25 03:58