css3でdivの領域が思った通りの幅にならない

よろしくお願いします。

css3でのレイアウトなのですが、divの領域が思った通りの幅になりません。

具体的には、ブラウザで実際に見えている領域と、デベロッパーツールで確認した際の実際に存在する領域の幅に違いが出ている、ということです。

実際に見えている領域はheightが115pxなのに対し、デベロッパーツールでは95pxしか取れていない、といった感じです。

今回、

html5
1<articl>
2 <section>
3  <div class="side">
4  </div>
5 
6  <div class="content">
7  </div>
8 </section>
9</articl>

といった部分で、sectionにbackgroung-colorを付けたいのですが、
articlのheightが20px(paddingで上下に10px付けてるため)、sectionのheightが0pxとなっており、困っています。

また、articlの上にあるheaderとnavを囲っているdivのheightも足りておらず、どう対処したら良いか分からない状態です。

以下ソースです。(一部を抜粋)

php
1<body <?php body_class(); ?>>
2
3	<!-- Facebookボタンスクリプト -->
4          <div id="fb-root"></div> <!-- このdivは欲しいか分からない -->
5          <script>(function(d, s, id) {
6            var js, fjs = d.getElementsByTagName(s)[0];
7            if (d.getElementById(id)) return;
8            js = d.createElement(s); js.id = id;
9            js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
10            fjs.parentNode.insertBefore(js, fjs);
11          }(document, 'script', 'facebook-jssdk'));</script>
12	
13<div class="wrap">
14	<div class="header_wrap">
15
16	 <!-- header -->
17	 <header>
18        <?php if(is_home()): // ホームが表示されている場合、ブログタイトルを H1 で表示 ?>
19        	<h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1>
20        <?php else: // ホーム以外のページが表示されている場合は H1 を削除。各記事やページのタイトルに H1 を使用 ?>
21            <h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1>
22        <?php endif; ?>
23                    
24        <p><?php bloginfo('description'); ?></p>
25
26	 </header>
27
28	 <!-- nav -->
29	 <nav>
30		<?php wp_nav_menu( array('menu_id' => 'nav' )); ?>
31	 </nav>
32  </div><!-- header_wrap -->
33
34 <!-- main -->
35 <article>
36
37    <?php get_sidebar('left'); ?>
38
39   <section>
40    <div id="content_view_2">
41      <h1>サイトトップです。</h1>
42      <p>固定ページです。編集してください。</p>
43     <div class='news'>
44      <div class='news_title'>
45        <h2>最新情報</h2>
46      </div>
47
48      <ul>
49        <?php
50        global $post;
51        $args_n = array( 'posts_per_page' => 5 );
52        $myposts = get_posts( $args_n );
53        foreach( $myposts as $post ) {
54          setup_postdata($post);
55          ?>
56          <li>
57            <dl>
58              <dt><?php the_time('Y.m.d') ?> <?php the_category('｜') ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dt>
59            </dl>
60          </li>
61          <hr width="100%" size="1" color="#b5b798" style="border-style:dotted">
62          <?php
63        }
64        wp_reset_postdata();
65        ?>
66      </ul>
67    </div><!-- newsの閉じdiv -->
68
69    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
70    <div class="post">
71      <div class="content_info">
72        <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
73          <?php the_content("続きを読む"); ?>
74      </div> <!-- content_info -->
75    </div>  <!-- post -->
76
77    <?php endwhile; ?>
78                     
79    <?php endif; ?>
80
81    </div><!-- contet_viewの閉じdiv -->
82  </section>
83</article>

css
1@charset 'UTF-8';
2
3@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
4*{
5	margin: 0;
6	padding: 0;
7	font-family: 'Noto Sans Japanese', sans-serif;
8	-webkit-box-sizing: border-box;
9	-moz-box-sizing: border-box;
10	-o-box-sizing: border-box;
11	-ms-box-sizing: border-box;
12	box-sizing: border-box;
13}
14
15
16body{
17	background-image: url(images/dd.gif);
18}
19
20.wrap {
21	width: 100%;
22	height: auto;
23	margin: 0 auto;
24	float: left;
25}
26
27	.wrap:after{ 
28		clear: both;
29		content: '';
30		display: block;
31	}
32
33
34/** common **/
35h1{
36	font-size: 24px;
37	color: #23272d;
38}
39
40h2{
41	font-size: 20px;
42	color: #23272d;
43}
44
45h3{
46	color: #23272d;
47}
48
49p{
50	color: #23272d;
51}
52
53a{
54	color: #23272d;
55	text-decoration: none;
56}
57
58
59/** header_wrap **/
60.header_wrap{
61	width: 80%;
62	height: auto;
63	margin: 0 auto; 
64}
65
66	/**  header  **/
67	header{
68		width: 100%;
69		background-color: #FFF;
70		padding-left: 5px;
71	}
72		header h1 a{
73			font-size: 30px;
74			text-decoration: none;
75		}
76
77	/** nav **/
78	nav{ 
79		width: 100%;
80		height: auto;
81		float: left;
82		background-color: #30393a;
83	}
84
85	nav:after{ 
86		clear: both;
87		content: '';
88		display: block;
89	}
90
91		.menu ul{
92			width: auto;
93			text-align: center;
94			list-style: none;
95		}
96
97			.menu ul li{
98				width: auto;
99				height: 45px;
100				line-height: 45px;
101				padding: 0 10px;
102				margin: 0 auto;
103				float: left;
104			}
105
106			.menu ul li:after{ 
107				clear: both;
108				content: '';
109				display: block;
110			}
111
112				.menu ul li a{
113					color: #d6d6d1;
114					text-decoration: none;
115					display: block;
116				}
117
118				.menu ul li a:hover,
119				.menu ul li a:active{
120					color: #30393a;
121					background-color: #f9eb81;
122				}
123
124article{
125	width: 80%;
126	height: auto;
127	margin: 0 auto;
128	padding: 10px 0;
129}
130
131section{
132	width: 100%;
133	height: auto;
134}
135
136/** content **/
137
138#content_view_2{
139	width: 80%;
140	height: auto;
141	padding: 10px 5px;
142	margin: 0 auto;
143	/** border-style: solid; **/
144	/** border-width: 1px; **/
145	float: left;
146	background-color: #FFF;
147	position: relative;
148}
149
150#content_view_2:after{ 
151	clear: both;
152	content: '';
153	display: block;
154}
155
156	#content_view,#content_view_2 h1{
157		padding-bottom: 10px;
158	}
159
160	#content_view,#content_view_2 p{
161		padding-bottom: 5px;
162	}
163
164	.news{
165		width: 80%;
166		padding: 10px 0;
167	}
168		ul.news{
169			list-style: none;
170		}
171			.news ul li{
172				display:block;
173			}
174
175		.news_title{
176			widht: 100%;
177			height: auto;
178			margin: 0 0 15px 0;
179			padding: 5px 0 5px 10px;
180			background-color: #23272d;
181		}
182
183			.news_title h2{
184				color: #FFF;
185				font-size: 16px;
186			}
187
188		.news ul li dl dt a{
189			padding: 0 10px 0 15px;
190		}
191
192	.post{
193		width: 100%;
194		height: 100%;
195		margin: 0 auto;
196		padding-left: 5px;
197		content: '';
198		display: block;
199		clear: both;
200	}
201
202		.post ul li{
203			list-style: none;
204		}
205
206		.title_wrap{
207			width: 100%;
208			height: 100%;
209			margin-bottom: 20px;
210			float: left;
211			color: #FFF;
212			background-color: #30393a;
213		}
214
215		.title_wrap:after{ 
216			clear: both;
217			content: '';
218			display: block;
219		}
220
221			.title_wrap h1{
222				color: #FFF;
223			}
224
225			.cat a{
226				color: #FFF;	
227			}
228
229			.cat a:hover{
230				color: #f9eb81;	
231			}
232
233			#text_single{
234				width: 100%;
235				height: 100%;
236				margin-bottom: 20px;
237				float: left;
238			}
239
240			#text_single:after{ 
241				clear: both;
242				content: '';
243				display: block;
244			}
245
246			.post p a img{
247				max-width: 100%;
248				height: 100%;
249			}
250			
251
252/** sidebar **/
253#sidebar_view_left,#sidebar_view_left_3{
254	width: 20%;
255	height: auto;
256	padding: 10px 0 10px 0;
257	/** border-width: 1px;  **/
258	/** border-style: solid; **/
259	float: left;
260	background-color: #FFF;
261}
262
263#sidebar_view_left,#sidebar_view_left_3:after{ 
264	clear: both;
265	content: '';
266	display: block;
267}
268
269	.widget-container{
270		padding: 10px 0;
271	}
272
273	ul#sidebar_view_left{
274		list-style: none;
275	}
276
277		#sidebar_view_left ul li{
278			display: block;
279			padding-bottom: 10px;
280		}
281
282			#sidebar_view_left ul li ul{
283				padding-bottom: 5px;
284			}
285
286				#sidebar_view_left ul li ul li{
287					padding-top: 5px;
288				}
289
290					#sidebar_view_left ul li ul li a{
291						display: block;
292					}
293
294					#sidebar_view_left ul li ul li a:hover{
295						color: f9eb81;
296					}
297
298
299
300.widget-container ul li{
301	list-style: none;
302}
303
304		#wp-calendar tbody tr td a{
305			color: #ff1b81;
306		}
307
308ui.sidebar{
309	list-style: none;
310}
311
312
313#sidebar_view_right,#sidebar_view_right_3{
314	width:20%;
315	height: auto;
316	padding: 10px 0 10px 0;
317	float: left;
318	background-color: #FFF;
319}
320
321#sidebar_view_right,#sidebar_view_right_3:after{
322	/** clear: both; **/
323	content: '';
324	display: block;
325}
326
327	ul#sidebar_view_right,ul#sidebar_view_right_3{
328		list-style: none;
329	}
330
331		#sidebar_view_right ul li{
332			display: block;
333			padding-bottom: 10px;
334		}
335
336			#sidebar_view_right ul li ul{
337				padding-bottom: 5px;
338			}
339
340				#sidebar_view_right ul li ul li{
341					padding-top: 5px;
342				}
343
344					#sidebar_view_right ul li ul li a{
345						display: block;
346					}
347
348					#sidebar_view_right ul li ul li a:hover{
349						color: f9eb81;
350					}
351
352
353
354
355
356/** footerの高さを揃える為の領域 **/
357.footer_thisside{
358	width: 100%;
359	height: 10px;
360}
361
362/** footer **/
363footer{
364	width: 80%;
365	background-color:#bbb;
366	margin: 0 auto;
367	clear: both;
368}
369
370.widget-area ul li{
371	list-style: none;
372	display: inline;
373}
374
375
376/* 599px以下のスタイル */
377@media (max-width: 599px){
378
379	h1{
380		font-size: 20px;
381	}
382
383	h2{
384		font-size: 18px;
385	}
386
387	h3{
388		font-size: 16px;
389	}
390
391	#content_view_1,
392	#content_view_2{
393		width: 100%;
394	}
395
396		.news{
397			width: 100%;
398		}
399
400		#img_tr{
401			width: 100%;
402		}
403
404		#content_info{
405			width: 100%;
406		}
407
408	#sidebar_view_left,
409	#sidebar_view_right{
410		width: 100%;
411	}
412
413}

最初は、floatを書けた後にclearfixをつけていないのが原因だと思ったので付けてみましたが上手く行きませんでした。
原因として考えられることは何でしょうか？
よろしくお願いします。

追記
cssを修正しました。

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

回答1件

ベストアンサー

ひとまず綴り間違いと設定間違いが散見されるので、clearfix箇所の設定の確認と
「dispray」→「display」への置換をしましょう。
下記で挙げているのは一例で、ほかにもありました。

CSS
1#content_view_2:after{ 
2    clear: both;
3    content: '';
4    dispray: block; ←綴り間違い「display」
5}
6
7#sidebar_view_left,#sidebar_view_left_3:after{ 
8    clear: both;
9    content: '';
10    dispray: block; ←綴り間違い「display」
11}
12
13#sidebar_view_right,#sidebar_view_right_3{ ←疑似要素の:afterが抜けている
14    clear: both;
15    content: '';
16    dispray: block; ←綴り間違い「display」
17}
18

clearfixのつけ方が間違っていました。
floatさせる要素の親タグにつけます。
全ての箇所がそういう関係になるよう、設定を修正してください。

HTML
1<div class="wrap">
2  <div class="box">box</div>
3  <div class="box">box</div>
4<div>

CSS
1.wrap:after {
2  content: "";
3  display: block;
4  clear: both;
5}
6
7.box {
8  float: left;
9}
10

投稿2016/02/06 10:59

編集2016/02/06 22:51

yamato_hikawa

総合スコア2092

退会済みユーザー

2016/02/06 21:23

回答ありがとうございざます。スペルミスと、afterが抜けている部分を修正しました。なお結果は変わっていません。

yamato_hikawa

2016/02/06 22:51

clearfixの使い方が違っていたので、回答に追記しました。

退会済みユーザー

2016/02/12 11:15

修正した結果、思った通りの形になりました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

css3でdivの領域が思った通りの幅にならない

関連した質問