Hi there.

I am practicing some HTML5 and CSS and I am having a hard time with my navigation. I want to set up my layout such that my navigation can appear before the page header. I managed to do it, except the navigation is sectionally separated from the rest of the content, such that there is some space between the navigation and the rest of the container, including the main header. Also, I would like to set my navigation hyperlinks without having to use the float property.

Here is my code. I used embedded CSS.

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="none">
<meta name="description" content="Practice">
<title>Let's Build</title>
<style>
body {  background-color: #fff;
}

#container {  width:  80%;
              min-width: 900px;
	      margin-left: auto;
              margin-right: auto;
              margin-top: 20px;
}

#nav {
       padding: 5px;
       background-color: red;
       height: 20px;
       
}

#nav a {  
	text-decoration: none;      
}

#nav a:hover {	background-color: #C6E2FF;
}

#header	{  background-color: #27408B;
	   height: 200px;
} 

#header h2 {  color: red;
}          	

#left-column  {  float: left;
		 width: 200px;
                 background-color: red;
}

#right-column  {  position: relative;
                  left: 200px;
		  background-color: #fff;
}

</style>
</head>
<body>
<div id="container">
   <div id="nav">
      <a href="url">My Home.My Portfolio.Who I am.Contact Me.</a>
   </div>
   <div id="header">
     <h2>Let's Build</h2>
   </div>
   <div id="left-column">
     <h2>This is information</>
   </div>
   <div id="right-column">
     <h2>This is information</>
   </div>
</div> 
</body>
</html>