Hey, i want to make it so the email/password forum stays in the main h1 header but make it so its moved over to the right...i tired to make it float right but then i cant figure out how to get it aligned with the h1..heres my markup below, i would love your help and input.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www,w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta http-equiv="Content-Type"
			content="text/html; charset=utf-8"/>
		<link href="style1.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
	  <div id="head-container">
		<div id="header">
				<h1>Blahblahblah</h1>
			<div id="login">
				<form method="post" action="" class="login">
				<p>	
					<label for="email">Email</label>
					<input type="text" name="email" id="email"/>
					<label for="password">Password</label>
					<input type="password" name="password" id="password"/>
				    <input type="submit" value="login"/>
				</p> 
				</form>  
			</div>
		</div> <!-- END OF HEADER -->
	  </div> <!-- END OF HEADER-CONTAINER -->
	  <div id="navigation-container">
		<div id="navigation">
				<ul>
					<li><a href="/">About</a></li>
					<li><a href="/">Contact</a></li>
				</ul>
		</div> <!-- END OF NAVIGATION -->
	  </div> <!-- END OF NAVIGATION-CONTAINER -->
	  <div id="content-container">
		<div id="content-container2">
			<div id="content-container3">
				<div id="content">
					<h2>blahblah</h2>
						<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
				</div> <!-- END OF CONTENT -->
				<div id="aside">
					<h3>BlahBlah</h3>
						<p>blahblahblahblahb</p>
					<form>
						<p>
							<input type="radio" name="profile"   id="xxxxr" value="xxxxr"
							<label for="xxxx">xxxxxx</label>
						</p>
						<p>
							<input type="radio" name="profile" id="xxxx" value="xxxx"
							<label for="xxxxx>xxxxx</label>
						</p>
						<p>
							<input type="submit" value="Lets get started!"/>
						</p>
					</form>
				</div> <!-- END OF ASIDE -->
			</div> <!-- END OF CONTENT-CONTAINER3 -->
		</div> <!-- END OF CONTENT-CONTAINER2 -->
		<div id="footer-container">
			<div id="footer">
				<p>Copyright</p>
			</div> <!-- END OF FOOTER -->
		</div> <!-- END OF FOOTER-CONTAINER -->
	  </div> <!-- END OF CONTENT-CONTAINER -->
  	</body>
</html>
Code:
/*
CSS for XXXX.com
*/

#head-container {
	color: #000;
	background: #ccc;
}

#header {
	margin: 0 auto;
	width: 860px;
	padding: 20px;
	background: #ddd;
}

#header h1 {
	margin: 0;
}


#navigation-container {
	float: left;
	width: 100%;
	color: #000;
	background: #333;
}

#navigation	{
	margin: 0 auto;
	width: 900px;
}

#navigation ul {
	margin: 0;
	padding: 0;
}

#navigation ul li {
	list-style-type: none;
	display: inline;
}

#navigation li a {
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover {
	background: #383;
}

#content-container {
	float: left;
	width: 100%;
	color: #000;
	background: #eee;
}

#content-container2 {
	margin: 0 auto;
	width: 900px;
}

#content-container3 {
	float: left;
	width: 900px;
	background: #fff
}

#content {
	clear: left;
	float: left;
	width: 560px;
	padding: 20px 0;
	margin: 0 0 0 30px;
	display: inline;
}

#content h2 {
	margin: 0;
}

#aside {
	float: right;
	width: 240px;
	padding: 20px 0;
	margin: 0 20px 0 0;
	display: inline;
}

#aside h3 {
	margin: 0;
}

#footer-container {
	clear: left;
	color: #fff;
	background: #000;
}

#footer {
	margin: 0 auto;
	width: 900px;
	text-align: right;
	padding: 0;
	height: 1%;
}