#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 #header and #footer styles except for the background color in /*** Just for Looks ***/. 

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

header 1

#header

Since the h1 element has a default margin, the #header moves down by the margin value. For delicate design, remove the default margin and padding of h1 in the #header.

Add the following to /*** The Essential Code ***/ to move h1 down 9px in #header. 

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

header 2

#footer

Add the following to the #footer in 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 />
  [email protected]<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

Add the following to /*** The Essential Code ***/ to arrange #footer menu items horizontally. 

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

footer 2

Finish styling #footer as shown below. 

#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

Increase #content the left and right margins of #content by 5px to make the gap between #content and #sidebar and #content and #extra. 

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

The size of #content box is 1000px. The #content's width is 610px because the sum of left and right margins is 390px (180 + 210). With borders set to 1px on the left and right, #content's width will be 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