質問者さんの実現したいことは、 section
要素に overflow: hidden;
を設定することで実現することが出来ると思います(動作確認用リンク)。
HTML
1<!doctype html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <title>ウェブサイト制作</title>
7 <link href="style.css" rel="stylesheet" type="text/css">
8</head>
9
10<body>
11 <div id="box0">
12 <header>
13 <h1>令和新聞</h1>
14 </header>
15 </div>
16 <div id="box1">
17 <nav>
18 <ul>
19 <li><a href="top.html">TOP</a></li>
20 <li><a href="from.html">お問い合わせ</a></li>
21 </ul>
22 </nav>
23 </div>
24 <div id="box2">
25 <nav>
26 <ul>
27 <li><a href="top.html">TOP</a></li>
28 <li><a href="from.html">お問い合わせ</a></li>
29 </ul>
30 </nav>
31 </div>
32 <section>
33 <div id="box3">
34 <article>
35 <h2>太鼓の達人の太鼓部分盗まれる</h2>
36 <img src="dontyan.jpg">
37 <p>
38 愛知県北名古屋市のスーパーの施設内にあるゲームコーナーで4月末、太鼓をたたいて遊ぶリズムゲーム「太鼓の達人」の太鼓部分が盗まれる被害があり、少年3人が自分たちが盗んだとして、出頭していたことが、県警への取材でわかった。西枇杷島署が窃盗容疑で捜査している。 署やゲームコーナーの運営会社によると、被害があったのは4月29日午後4時5~25分ごろ。店内の防犯カメラに、出頭した少年らとみられる複数の人物が、重さおよそ10キロ程度の太鼓部分を袋に入れて持ち去る様子が映っていた。太鼓部分はボルトで固定されていたという。
39 同社関係者が映像をツイッターで公開したところ、5月3、4日に3人が相次いで署に名乗り出た。盗まれた太鼓は分解されていたが、運営会社に返還された。いずれも、署の任意での調べに「欲しくて盗んだ」という趣旨の説明をし、転売目的については否定しているという。 運営会社の関係者によると、太鼓部分は、専門の知識があれば、改造して海賊版と接続し、自宅で遊ぶことが可能だという。このゲームコーナーでは3月にも太鼓の一部が盗まれる被害があり、同署に被害届を出していた。
40 </p>
41 </article>
42 </div>
43 </section>
44 <div id="box4">
45 <footer>
46 <address>Copyright(C)ここに年 個人名or会社名,Allright Reserved.</address>
47 </footer>
48 </div>
49</body>
50
51</html>
CSS
1#box0 {
2 width: 100%;
3 height: 100px;
4 background-color: hotpink;
5}
6
7#box1 {
8 width: 100%;
9 height: 100px;
10 background-color: lightblue;
11}
12
13#box2 {
14 width: 10%;
15 height: 600px;
16 background-color: antiquewhite;
17 float: left;
18}
19
20#box3 {
21 width: 90%;
22 height: 600px;
23 background-color: mediumaquamarine;
24 float: right;
25}
26
27#box4 {
28 width: 100%;
29 height: 100px;
30 background-color: green;
31}
32
33section {
34 overflow: hidden;
35}