カラム落ちとレイアウト崩れの解消法を知りたいです。

度々の質問申し訳ございません。

現在コーディングをしていて、どうしても右側に配置しているサイドバーがカラム落ち？してしまい、上に持ってくることが出来ません。。
また、カラム落ちの影響なのか、ページに配置している画像などが中央に配置するつもりが全体的に左に寄ってしまい、修正することが出来なくなってしまいました。
どなたか、解消法をご教授お願いいたします。

body{
1	margin: 0px;
2	padding: 0px;
3}
4.line-decoration {
5	width: 100%;
6	height: 12px;
7	margin: 0px;
8	padding: 0px;
9	background: url(img/head-bg.jpg) repeat-x center top;
10}
11.request-icon{
12	float: right;
13	display: block;
14	width: 93px;
15	height: 27px;
16	margin-right: 10px;
17}
18.reserve-icon{
19	float: right;
20	display: block;
21	width: 93px;
22	height: 27px;
23	margin-left: 10px;
24}
25a{
26	text-decoration: none;
27	display:block;
28	text-indent:-9999px;
29	background-image :url(img/head-menu.jpg);
30	height:49px;
31	width:100%;
32	background-position: 0 top;
33}
34#globalnav {
35	display: block;
36	clear: both;
37}	
38#globalnav .idea a{
39	background-image :url("img/head-menu.jpg");
40	background-repeat: no-repeat;
41	background-position: -150px top;
42}
43#globalnav .service a{
44	background-image :url("img/head-menu.jpg");
45	background-repeat: no-repeat;
46	background-position: -300px top;
47}
48#globalnav .company a{
49	background-image :url("img/head-menu.jpg");
50	background-repeat: no-repeat;
51	background-position: -450px top;
52}
53#globalnav .FAQ a{
54	background-image :url("img/head-menu.jpg");
55	background-repeat: no-repeat;
56	background-position: -600px top;
57}
58#globalnav .access a{
59	background-image :url("img/head-menu.jpg");
60	background-repeat: no-repeat;
61	background-position: -750px top;
62}
63.box {
64	margin: 10px 0;
65	float: left;
66	width: 100%;
67	background: #ffffff ;
68}
69.box img {
70	max-width: 100%;
71	float: right;
72	margin: 0;
73}
74.box p {
75	margin: 0;	padding: 0px;
76}
77#sidebar a {
78	text-decoration: none;
79	float: left;
80	display:block;
81	text-indent:-9999px;
82	width: 255px;
83	height: 60px;
84	background-image :url(img/top-menu.jpg);
85	background-repeat: no-repeat;
86	background-position:  0, left bottom;
87}
88ul#sidebar {
89	display: block;
90	height: 300px;
91}
92ul#sidebar li {
93	display: block;
94	height: 60px;
95	list-style-type:none;
96}
97ul#sidebar .careplan a {
98	background-image: url(img/top-menu.jpg);
99	background-repeat: no-repeat;
100	background-position: left 0px;
101	display:block;
102	height:60px;
103}
104ul#sidebar .grouphome a {
105	background-image: url(img/top-menu.jpg);
106	background-repeat: no-repeat;
107	background-position: left -60px;
108	display:block;
109	height:60px;
110}
111ul#sidebar .service a {
112	background-image: url(img/top-menu.jpg);
113	background-repeat: no-repeat;
114	background-position: left -120px;
115	display:block;
116	height:60px;
117}
118ul#sidebar .homehelp a {
119	background-image: url(img/top-menu.jpg) ;
120	background-repeat: no-repeat;
121	background-position: left -180px;
122	display:block;
123	height:60px;
124}
125ul#sidebar .daycare a {
126	background-image: url(img/top-menu.jpg) ;
127	background-repeat: no-repeat;
128	background-position: left -240px;
129	display:block;
130	height:60px;
131}
132.left {
133	float: left;
134}
135h1{
136	color:#ffffff;
137	margin:0px;
138}
139h2{
140	height:80px;
141	padding-top:24px;
142	padding-left:20px;
143	margin:0px;
144	color:#000000;
145	clear:both;
146	}
147#content .newsdl dt {
148	clear: left;
149	float: left;
150	padding-left: 30px;
151	color: #ffc0c7;
152	display: block;
153	margin-top:0px;
154	margin-right: 0;
155	margin-left: 0px;
156	background-image: url(img/top-li.jpg);
157	background-repeat: no-repeat;
158	background-position: left top;
159	line-height: 20px;
160}
161dd{
162	margin-left:30px;
163	margin-bottom: 15px;
164	float: left;
165	width: 520px;
166}
167dt{
168	float:left;
169	clear:left;
170	width:125px;
171	color:#ffc0c7;
172}
173.newsdl .arrow-icon {
174		position: relative;
175		top: 4px;
176		margin-right: 10px;
177}
178ul#globalnav li{
179	float:left;
180	width:150px;
181	list-style-type:none;
182	background-color:#ff9fbf;
183	}
184ul{
185	padding:0px;
186	margin:0px;
187	}
188div#left{
189	float:left;
190	width:680px;
191	background-color:#ffffff;
192}
193div#right{
194	float:right;
195	width:220px;
196	padding-left:0px;
197}
198div#right img{
199	margin:0px;
200}
201.pagetop{
202	margin-right: auto;
203	margin-left; auto;
204	text-align: right;
205	padding-right: 45px;
206	padding-bottom: 5px;
207}
208div#footer {
209	text-align:center;
210	color:#717171;
211	clear:both;
212	height: 60px;
213	padding: 0;
214	background-image: url(img/foot-bg.jpg);
215	background-repeat: repeat-x;
216	background-position: bottom;
217	margin: 0px;
218	width: 100%;
219}
220div#wrapper{
221	width:900px;
222	margin: 0 auto;
223}
224/*ここから下層ページのコード*/
225#plannavi {
226	display: block;
227	margin-left: 15px;
228	overflow: hidden;
229	margin-bottom: 30px;
230}
231#plannavi li {
232	display: block;
233	height: 34px;
234	line-height: 32px;
235	width: 320px;
236	float: left;
237	background-position: left top;
238	margin-right: 10px;
239	margin-bottom: 10px;
240}
241ul#plannavi li a {
242	background-image: url(grouphome/img/navi.jpg);
243	background-repeat: no-repeat;
244	background-position: left top;
245	display: block;
246	height: 32px;
247	padding-left: 30px;
248	text-decoration: none;
249	border: 1px solid #ffdee7;
250	text-indent: initial;
251}
252h2.moji {
253	text-align: center;
254	background-image: url(img/con-h2.jpg);
255	background-repeat: no-repeat;
256	background-position: left top;
257	display: block;
258	padding-bottom: 25px;
259	padding-top: 25px;
260	margin-bottom: 18px;
261	width: 670px;
262}
263h3{
264	line-height: 21px;
265	background-image: url(grouphome/img/h3.png);
266	background-repeat: no-repeat;
267	background-position: left top;
268	padding-left: 35px;
269	padding-bottom: 15px;
270	margin-bottom: 15px;
271	display: block;
272}
273.h3 .midashi {
274	position: relative;
275	top: 4px;
276	margin-right: 10px;
277}
278#groupchart {
279    width: 600px;
280    overflow: hidden;
281}
282#groupchart .left,
283#groupchart .right {
284    float: left;
285    width: 300px;
286}
287#groupchart .groupwrap {
288    background-repeat: no-repeat;
289    background-position: 25px bottom;
290    padding-bottom: 25px;
291    margin-bottom: 10px;
292}
293#groupchart .left .groupwrap {
294    background-image: url(grouphome/img/arrow-pink.jpg);
295}
296#groupchart .right .groupwrap {
297    background-image: url(grouphome/img/arrow-blue.jpg);
298}
299	
300p.title1{
301	background-color: #ffbac5;
302	display: block;
303	width: 230px;
304	padding: 10px;
305	color: #ffffff;
306	font-weight: bold;
307	text-align: center;
308	margin-right: auto;
309	margin-left: auto;
310}
311p.title2{
312	background-color: #b0d9fe;
313	display: block;
314	width: 230px;
315	padding: 10px;
316	color: #ffffff;
317	font-weight: bold;
318	text-align: center;
319	margin-right: auto;
320	margin-left: auto;
321}
322table{
323	border: 1px solid #000000;
324	border-collapse: collapse;
325	border-radius: 5px;
326	margin-left: 40px;
327	margin-right: auto;
328}
329td{
330	border: 1px solid #000000;
331	border-collapse: collapse;
332	padding: 10px;
333}
334th{
335	border: 1px solid #000000;
336	padding: 10px;
337	background-color: #e6f3ff;
338}
339td.bgpink{
340	background-color:#ffedf0;
341}
342#container {
343	width: 900px;
344	margin-top: 0px;
345	margin-right: auto;
346	margin-bottom: 0;
347	margin-left: auto;
348	padding-top: 10px;
349	padding-right: 0px;
350	padding-bottom: 0px;
351	padding-left: 0px;
352}
353div#right {
354	float: right;
355	width: 210px;
356	padding: 0px;
357	margin-top: 0px;
358	margin-right: 0px;
359	margin-bottom: 30px;
360	margin-left: 0px;
361	display: block;
362}

kei344

2017/09/20 15:13

HTMLが提示されていません。また、バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

dit.

2017/09/21 00:11

HTMLの提示は画像ではなくコードでしてください。CSSも頭が切れているように見えますので、もう一度確認してください。

退会済みユーザー

2017/09/21 03:35

ＨＴＭＬを載せようとしたのですが、文字数の制限に引っかかってしまうので、このような形になってしまいました。申し訳ございません。。

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

回答1件

ベストアンサー

提示のコードでは完全には再現できませんので、気になる部分だけ挙げておきます。

以下全て提示の画像内の行数です。

22行目 class="left"ではなくid="left"ではないか
38行目～156行目まではid="left"内に配置するべきではないか？（37行目で閉じられている）
118行目、120行目のaltの書き方はミス？

全体レイアウト用のidでのleft、rightと、id="groupchart"内のclassのleft、rightがあり混乱しそうですね。

どの部分が左側（メインカラム）なのか、どの部分が右側（サイドバー）なのかを整理しておいた方がいいと思います。
適切なインデントを心掛ける事や</div>のところにコメントで何を閉じたか書いておくなどやりやすい方法を模索してください。
floatを多用していることで適切にclearしないとどんどん崩れます。
今回のようなカラム落ちを防ぐためにも、全体の構造を整理してみてください。

（そういえばCSSには#sidebarがありますがHTMLには無いですね。これもその内混乱のもとになりそうです）

投稿2017/09/21 06:14

dit.

総合スコア3235