#header, #footer, #content styling

Add the following to #header in index.html.

<h1><a href="/"><img src="images/ci.gif" alt="java-school" /></a></h1>

Remove the rest of the styles in #header and #footer except for the background color in the /*** Just for Looks ***/.

#header, #footer {
	background: #999;
}

header 1

#header h1 positioning

Since the h1 element has a default margin, #header drops by the margin value.
To prevent this, remove the default margins and padding for #header h1.
In addition, to move h1 down 9px in #header,
Add the following to /*** The Essential Code ***/.

#header h1 {
	margin: 0;
	padding: 0;
	position: relative;
	top: 9px;
}

header 2

#footer styling

Add the following to #footer in the index.html.

<ul>
	<li><a href="#">Guide</a></li>
	<li><a href="#">Privacy</a></li>
	<li><a href="#">Email Collection Ban</a></li>
	<li id="company-info">Phone : 1234-5678, FAX : 1234-5678<br />
	johndoe@gmail.org<br />
	Copyright java-school.net All Rights Reserved.</li>
	<li><a href="#">Map</a></li>
</ul>

Modify #footer in /*** The Essential Code ***/ as shown below.

#footer {
	clear: both;
	height: 70px;
	font-size: 11px;
	color: #8d8d8d;
	letter-spacing: -1px;
	border-top: 1px solid #DAEAAA;
	position: relative;
	top: 7px;	
}

Remove #header, #footer in /*** Just for Looks ***/.

footer 1

Make the #footer menus horizontally

Add the following to /*** The Essential Code ***/.

#footer > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#footer > ul > li {
	float: left;
} 

footer 2

#footer global menu styling

#footer > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	left: 8px;
}
#footer > ul > li {
	float: left;
	padding: 6px 12px 6px 8px;
	background: url('../images/circle.gif') no-repeat 0 50%;
}
#footer > ul > li > a {
	color: #8D8D8D;
	text-decoration: none;
}
#footer > ul > li > a:hover {
	text-decoration: underline;
}
#footer > ul > li#company-info {
	margin-left: 350px;
	letter-spacing: 0;
	background: none;
}

footer final

#content styling

I Increasd #content the left and right margins of #content by 5px for the interval between #sidebar and #extra as shown below.

#content {
	margin-left: 180px;
	margin-right: 210px;
}

The area of the #content box is 1000px.
If the sum of left and right margins is 390px (180 + 210), the width of #content is 610px.
If you give the border 1px to the left and right, the width of #content is 608px.

Modify #container and #extra as shown below.

#container {
	float: left;
	width: 100%;
	border-top: 1px solid #DAEAAA;
}
#extra {
	float: left;
	width: 205px;
	margin-left: -205px;
	margin-bottom: 20px;
	position: relative;
	top: 7px;
}

Change the height of #content from 100px to 300px in the /*** Just for Looks ***/ for testing.

#content {
	font-size: large;
	text-align: center;
	background: #DDD;
	height: 300px;
}

content 1

References