div を綺麗に並べる方法はどうやるのでしょうか？？。

このページの悪いところ、改善点をお願いします。

html
1<!-- Assignment 18 % COMP112 Tomofumi Kimura Contact page-->
2<!DOCTYPE html>
3<html lang="en">
4	<head>
5	<!-- kimto341 child care-->
6		<meta charset = "UTF-8">
7		<link rel="stylesheet" type = "text/css" href="style.css">
8		<title>Child Care HomePage</title>
9	</head>
10	<body>
11	<!-- Main Heading-->
12	<div id = "header">
13	<h1>Welcome to Mama Bear Child Care</h1>
14	</div>
15	<!-- Navigation Area -->
16	<div id = "nav">
17	<ul>
18		<li><a class="active" href="index.html">Home</a></li>
19		<li><a href = "philosophy.html">Our Philosophy</a></li>
20		<li class = "dropdown"><a href="javascript:void(0)" class = "dropbtn">Our Centre</a>
21		<div class = "dropdown-content">
22		<a href="accelerated_programme.html">Mama Bear Accelerated Programme</a>
23		<a href="environment.html">Our Environment</a>
24		<a href="goals.html">Our Goals</a>
25		</div>
26		</li>
27
28
29		<li><a href="childs_day.html">The Childs Day</a></li>
30		<li><a href="settling.html">Settling in</a></li>
31		<li><a href = "staff.html">Our Staff</a></li>
32		<li><a  class = "active" href="contact.html">Contact</a></li>
33	</ul>
34	</div>
35
36	
37	<!-- Main Contact Area -->
38
39
40		<form method="get" enctype="application/x-www-form-urlencoded" action="http://www.cs.otago.ac.nz/112bin/112formslab.cgi">
41		<h2>Contact</h2>
42
43
44	
45	<div>
46			<input type="hidden" name="recipient" value="kimto8104@gmail.com">
47			<input type="hidden" name="subject" value="Toyger Request">
48			<input type="hidden" name="followup-page" value="http://www.cs.otago.ac.nz/comp112/followup.html">
49	</div>
50
51		
52		<div id = "form_area">
53		<h3>Send Us a Message !!!</h3>
54
55		<fieldset id = "personalinfo">
56			<legend>Personal Information</legend>
57
58			<p><label for = "firstname">First Name:<span>*</span></label></p>
59
60			<p><input type = "text" id ="firstname" name="firstname" size="30" placeholder="Your First Name"></p>
61
62			<p><label for ="lastname">Last Name:<span>*</span></label></p>
63			<p><input type ="text" id = "lastname" name="lastname" size="30" required pattern="[A-Za-z -']*" placeholder="Your Last Name"></p>
64
65			<p><label for ="sender">Email:<span>*</span></label></p>
66			<p><input type ="email" id="sender" name="sender" required placeholder="Your Email Address" size="30"></p>
67
68			<p><label for ="phone">Contact Number:<span>*</span></label></p>
69			<p><input type="tel" id="phone" name="phone" required pattern="[0-9 ()-]+" placeholder="Your Phone Number" size="30"></p>
70			<p>I would like to receive updates from Mama Bear Child Care</p>
71			<p><input type ="radio" name = "yesno" id ="yes">Yes</p>
72			<p><input type ="radio" name = "yesno" id ="yes">No</p>
73			</fieldset>
74		
75			<p>Comments</p>
76
77			<p><textarea cols="50" rows="7" id="comments" title="Let us know what you think.">Add your comments here</textarea></p>
78
79			<fieldset id = "resubmit">
80				<input type="submit" name="sendbutton"  value="Send!!!" id ="send">
81
82			</fieldset>
83
84		</div>
85
86		<div id = "info_area">
87
88		<h3>Contact Us!!</h3>
89		<h4>If you have any questions about the Mama Bear please contact us at:</h4>
90			<ul>
91				<li><a href="mailto:kimto341@student.otago.ac.nz">enquiries@mamaBear.co.nz</a></li>
92				<li>123 Salmon Lake Lane</li>
93				<li>Big Bear City</li>
94			</ul>
95
96		</div>
97	
98	</form>
99
100
101
102	<!-- Footer area -->
103	
104	<div id = "footer">
105		<footer>This website was created for a University project.  The content is largely fictional and no services are actually being offered.</footer>
106		
107	</div>
108		
109	</body>
110</html>

CSS
1/* COMP112 Assignment 18% tkimura Tomofumi Kimura stylesheet*/ 
2body{
3	background-color:rgb(224, 200, 202);
4	margin:0px;
5}
6
7/* main heading*/
8#header h1{
9	background-color:rgb(223,51,63);
10	text-align: center;
11	width:100%;
12	margin:0px;
13	padding:20px;
14	position:fixed;
15	top:0;
16	left:0;
17	right:0;
18}
19/* Navigation whole area */
20#nav{
21	background-color:rgb(87, 209, 204);
22	position:fixed;
23	top:75px;
24	left:0;
25	right:0;
26	width:100%;
27	margin:0px;
28}
29/* Navigation whole ul ara */
30#nav ul{
31	max-width:100%;
32	list-style-type:none;
33	padding:0;
34	margin-top:0px;
35	margin-left:150px;
36	margin-right:auto;
37	margin-bottom:auto;
38	overflow:hidden;
39	background-color:inherit;
40}
41/* Navigation list area*/
42#nav li{
43	float:left;
44	
45
46}
47
48/* Navigation list link, DropDown menu*/
49#nav li a, .dropbtn{
50	display:block;
51	color:inherit;
52	text-align:center;
53	padding:14px 30px 10px 30px;
54	text-decoration: none;
55
56
57}
58/* when user move the pointer to the place */
59#nav li a:hover, .dropdown:hover .dropbtn{
60	background-color:yellow;
61}
62
63#nav li.dropdown{
64	display:block;
65}
66/* drop down area*/
67.dropdown-content{
68	display:none;
69	position:absolute;
70	background-color:#f9f9f9;
71	min-width:100px;
72	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
73	z-index: 1;
74}
75/* drop down list element*/
76.dropdown-content a{
77	color:black;
78	padding:12px 16px;
79	text-decoration: none;
80	display:block;
81	text-align:left;
82}
83/* when mouse is over the drop down list element */
84.dropdown-content a:hover{
85	background-color:#f1f1f1;
86}
87
88.dropdown:hover .dropdown-content{
89	display:inline;
90}
91
92
93
94/* Main Area*/
95.content{
96	margin-top:170px;
97	margin-right:20px;
98	height:auto;
99
100}
101
102
103/* h2 Mama Bear CHild Care heading */
104h2{
105	text-align: center;
106	color:rgb(0, 102,255);
107}
108h3{
109	text-align: center;
110
111}
112.content h4{
113	text-align:center;
114
115}
116.content span{
117	color:red;
118}
119#attention{
120	text-align:center;
121	background-color:rgb(153,204,255);
122	border:dotted 2px ;
123	padding-left:-10px;
124	border-radius: 40px;
125}
126
127/* Education Services UList*/
128.content ul{
129	margin:auto;
130	border-radius: 50px;
131	border:2px solid #73AD21;
132	padding:40px;
133	padding-top:10px;
134	width:300px;
135	height:140px;
136	background-color:rgb(153,204,255);
137	list-style-image: url('../Images/list_image/icn_12.gif');
138}
139.content li{
140	padding:20px;
141}
142/* Philosophy page List */
143#philo_list{
144	border-radius:50%;
145	background-color:white;
146	width:800px;
147	height:500px;
148	background-image: url(../Images/babypaint.jpg);
149	background-repeat: no-repeat;
150	background-position: 50px center;
151}
152#philo_list li{
153	margin-left:30px;
154	font-size:15px;
155}
156/* First list in philosophy List */
157#philo_list #list1{
158	margin-left:130px;
159	margin-top:50px;
160}
161/* Second list in philosophy List*/
162#philo_list #list2{
163	margin-left:160px;
164}
165/* Third List in philosophy List*/
166#philo_list #list3{
167	margin-left:180px;
168}
169
170/* Fourth List in philosophy List*/
171#philo_list #list4{
172	margin-left:200px;
173}
174
175/* Fifth List in philosophy List*/
176#philo_list #download{
177	margin-left:200px;
178	color:blue;
179	
180
181}
182#philo_list #download span{
183	color:red;
184	text-decoration: underline;
185
186}
187
188/* Staff page layout */
189#staff{
190	border:solid 2px;
191}
192/* Staff page List*/
193
194
195.content #teachers li{
196	list-style-image: none;
197	padding:5px;
198
199
200}
201
202/* Conatact Page Layout*/
203
204
205form{
206	
207	margin:160px auto auto auto;
208}
209
210#form_area{
211	background-color:rgb(231,223,151);
212	float:left;
213	width:500px;
214	margin-left:100px;
215	border:2px solid;
216}
217#form_area h3{
218	text-align:center;
219}
220#form_area p{
221	margin-left:20px;
222
223}
224#info_area{
225	background-color:white;
226	float:left;
227	width:400px;
228	display:inline-block;
229	margin:10px;
230	border:2px solid;
231}
232
233#info_area h4{
234	margin:10px;
235	color:red;
236}
237
238fieldset{
239	border:none;
240}
241legend{
242	color:blue;
243}
244span{
245	color:red;
246}
247#send{
248	background: rgb(122, 187, 224);
249	color: rgb(215,81,72);
250	border-style: outset;
251	border-color: white;
252	height: 50px;
253	width: 100px;
254	font: bold 15px arial, sans-serif;
255	text-shadow:none;
256}
257#footer{
258	clear:left;
259}
260
261