CSS header layout help

HTML & CSS
1

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.

<!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>

/*
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%;
}
2

Hi,
The h1 is a block level element and it extends to the full width of the available space. When you tried to float the #login div by itself it was to the right but it was below the block h1.

You can float them both and they will then be on the same vertical plane. You will need to force the header div to contain it’s floats though. That is done with overflow:hidden; for modern browsers and the width (haslayout) will cause IE6/7 to contain floats.

This should work for you:

#header {
    margin: 0 auto;
    width: 860px;
    padding: 20px;
    background: #ddd;
    [COLOR=Blue]overflow:hidden;
[/COLOR]}
#header h1 {
    [COLOR=Blue]float:left;[/COLOR]
    margin:0;
    font:bold 1.8em/1.3 arial;
    background:lime;
}
#login {
    [COLOR=Blue]float:right;
[/COLOR]    padding: .3em 0;
    background:red;
}
form, p[COLOR=Blue] {margin:0}[/COLOR]
3

hey thanks very much this was a big help…and i guess why i got you here, is there anyway to change the color inside the form box?

4

If you are talking about the email and password input backgrounds then you can target them with the IDs that are already set on them.

input#email,
input#password {
    background: #CCC;
}

If you are talking about the #login div itself I had set red BG color (for testing) on it in the code snippet above.

5

You also don’t need that Login div. The form itself can be styled. And it can have a background colour in place of the login div.