CSS　画像の並べ方

HTML、CSS初学者です。以下の画像のようなWebサイトを作っているのですがうまくいかない点があります。

赤枠：wrap,緑：content,茶：main-center,水：global-menu,黄色枠に黒：画像
というイメージで作っています

発生している問題・エラーメッセージ

画像を並べる事は出来ましたが、背景の画像がglobal-menuのpadding-top:10px分しか表示されません。上手く背景を表示させるにはどうすればいいのでしょうか？
イメージで言うと、global-menu上辺とmain-centerの間しか背景が出ません

該当のソースコード

css
1#index {
2
3}
4
5#wrap{
6  background-image: url(../image/背景.jpg);
7  background-size: cover;
8}
9
10.content{
11  text-align: center;
12  width: 1000px;
13  margin: auto;
14}
15
16.main-center {
17  width: 983px;
18  margin: 0 auto;
19  padding-top: 10px;
20}
21
22.gloabal-menu {
23  padding-top: 10px;
24  
25}
26
27.menu-bg{
28  float: left;
29}

HTML
1<body id="index">
2<div id="wrap">
3  <div class="content">
4    <div class="main-center">
5      <div class="global-menu">
6        
7        <img src="image/ 画像１.png" class="menu-bg">
8        <img src="image/画像２.jpg" class="menu-bg">
9        <img src="image/画像３.jpg" class="menu-bg">
10        
11      </div>
12    </div>
13  </div>
14</div>
15</body>

現状

画像を並べる事は出来ましたが、背景の画像がglobal-menuのpadding-top:10px分しか表示されません。上手く背景を表示させるにはどうすればいいのでしょうか？

退会済みユーザー

2018/05/19 05:07

関係のない、質問文中のノイズを除去してください。

m.ts10806

2018/05/19 05:07

冒頭など、質問テンプレートの文言が残っています。本件に関係ない文章であれば除去してください。

m.ts10806

2018/05/19 05:10

また、質問編集画面の質問タイトル横にある「初心者アイコン」をご活用ください。質問一覧にも表示されるので分かりやすくなります。

退会済みユーザー

2018/05/19 05:12

本件に関係の部分を消去しました。ご指摘ありがとうございます。

m.ts10806

2018/05/19 05:15

「上手く背景を表示させる」というのは結局どうしたいのでしょうか？画像を添付することができるので、現在の状態と、目指す状態を図示された方が的確な回答が得やすくなります。

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

回答2件

ベストアンサー

背景の画像がglobal-menuのpadding-top:10px分しか表示されません。

フロートにより親の高さがない為です。親に高さがあれば表示されます。

親に高さを出すには「kei344」さんのoverflow: hidden;の他にも「clearfix」を使う方法もありますので、ご参考までに･･･
clearfixでfloatを解除する 2016年版

投稿2018/05/23 04:32

yoshinavi

総合スコア3523

CSS
1.gloabal-menu {
2	padding-top: 10px;
3	overflow: hidden;/*ADD*/
4}
5```**動くサンプル：**[https://jsfiddle.net/w88v1r84/](https://jsfiddle.net/w88v1r84/)
6
7---
8
9【よこ並びのCSS。】
10[http://lopan.jp/layout/](http://lopan.jp/layout/)
11
12【段組みのCSS。】
13[https://lopan.jp/layout2/](https://lopan.jp/layout2/)
14
15【CSSのみで横並びの要素の高さを揃える | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website】
16[http://shanabrian.com/web/html-css-js-technics/css-equal-height.php](http://shanabrian.com/web/html-css-js-technics/css-equal-height.php)