CSSレイアウト(float)について

CSSでレイアウトの学習中です。
floatを中心にdivで囲った領域を移動させレイアウトを組む練習を行っておりますが、
どうしても、以下のイメージの様にできません。。。。

どこが、どのように間違っているのかご指摘いただけたらと思います。

レイアウトイメージ抜粋

HTML
1<!DOCTYPE>
2<html lang="ja">
3
4<head>
5	<meta charset="utf-8">
6	<link rel="stylesheet" type="text/css" href="style.css">
7	<title>Sample</title>
8</head>
9
10<body>
11	<div id="wrapper">
12		<header>
13			<div class="coments">
14				header
15			</div>
16
17			<div id="headerimg">
18				<p class="p-coments">
19					img挿入エリア with:960px height:100px
20				</p>
21			</div>
22		</header>
23
24		<nav>
25			<ul id="menu">
26				<li>メニュー1</li>
27				<li>メニュー2</li>
28				<li>メニュー3</li>
29			</ul>
30			<div class="clear">
31			</div>
32		</nav>
33
34		<div id="mainimg">
35			<p class="p-coments">メイン画像挿入エリア with:960px height:300px</p>
36		</div>
37
38		<div id="contents">
39			<div class="coments">
40				contents
41			</div>
42
43			<div id="newsbox">
44				<h3 class="midashi">h3 見出し</h3>
45				<p>新着情報①</p>
46				<p>新着情報②</p>
47				<p>新着情報③</p>
48			</div>
49
50			<div class="contentsbox">
51				<h3 class="midashi">h3 contentsbox-1</h3>
52				<div class="imgbox">
53					画像エリア
54				</div>
55				<p>説明文。説明文。説明文。説明文。説明文。<br>説明文。説明文。説明文。説明文。説明文。</p>
56				<p class="clear coments">Clear both</p>
57			</div>
58
59			<div class="contentsbox">
60				<h3 class="midashi">h3 contentsbox-2</h3>
61				<div class="imgbox">
62					画像エリア
63				</div>
64				<p>説明文。説明文。説明文。説明文。説明文。<br>説明文。説明文。説明文。説明文。説明文。</p>
65				<p class="clear coments">Clear both</p>
66			</div>
67		</div>
68
69		<div id="sidnavi">
70			<h2>sidnavi</h2>
71		</div>
72		<div class="clear coments">
73			Clear both
74		</div>
75
76		<footer>
77			footer
78		</footer>
79	</div>
80
81</body>
82</html>
83

CSS
1@charset "utf-8";
2
3#wrapper {
4	width: 960px;
5	margin: 0 auto;
6	border: dashed 0.2px;
7}
8
9.coments {
10	font-size: 5px;
11	text-align: center;
12}
13
14.p-coments {
15	text-align: center;
16	margin: 0 auto;
17}
18
19.clear {
20	clear: both;
21}
22
23header {
24	background-color: #c4d5e5;
25	width: 960px;
26	height: 110px;
27}
28
29#headerimg {
30	width: 960px;
31	height: 100px;
32	border: dashed 0.2px;
33}
34
35#menu {}
36
37#menu li {
38	list-style-type: none;
39	width: 30%;
40	text-align: center;
41	float: left;
42}
43
44#mainimg {
45	border: dashed 0.2px;
46	width: 960px;
47	height: 300px;
48}
49
50#newsbox {
51	background-color: #c4d5e5;
52}
53
54.contentsbox {
55	border: dashed 0.2px;
56	width: 600px;
57}
58
59.midashi {
60	text-align: center;
61}
62
63.imgbox {
64	width: 200px;
65	height: 200px;
66	border: solid 0.1px;
67	float: right;
68}
69
70#sidnavi {
71	width: 300px;
72	background-color: #c4d5e5;
73	float: right;
74}
75
76footer {
77	width: 960px;
78	height: 100px;
79	border: dashed 0.2px;
80	text-align: center;
81}
82

宜しくお願い致します。

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

回答2件

ベストアンサー

floatで回り込む時はレベルをあわせないとダメですよ。
id="sidnav"はdivのid="contents"と同レベルなので今のままでそこにfloatで持っていくことは難しいと思います。試しにid="contents"にstyle="float:left;"付けてみてください。仕組みが理解できるかと思います。

投稿2018/01/17 11:21