I am working on a design for a website. The problem is that when you make the window small, and then scroll down, ...well you'll see it. I'll include the relevant files.

Heres the url
http://stepmaniapraise.newelltest.com/

index.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>stepmania Praise</title>
	<link rel="stylesheet" type="text/css" href="style1.css" />
	<?php require 'library/opendb.php'; ?>
	<script language="JavaScript" src="library/login.js">
	</script>
</head>
<body>
	<?php require 'include/header.php'; ?>
	<?php require 'include/sidebar.php'; ?>
    <div id="content">
					<?php
	
					// Request the home articles
					$result = @mysql_query('
					SELECT a.title, a.article
					FROM articlescategories as ac
					inner
  					JOIN articles as a
    				on a.a_id = ac.a_id
 					WHERE ac.c_id = "1"
					');
					if (!$result) {
					exit('<p>Error performing query: ' . mysql_error() . '</p>');
					}
					
					// Display the text of each home article
					while ($row = mysql_fetch_array($result)) {
						echo "<h1>" . $row['title'] . "</h1>" . $row['article'];
					}
					
					?>
                    <p>
                    <!--
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                      -->
                    </p>
    </div> <!-- end of content div -->
	<?php require 'library/closedb.php'; ?>
</body>
</html>
sidebar.php
Code:
    <div id="sidebar">
	
    <h1>Login</h1>
    
	<?php
	
	if (1==1)
	{
	echo '
	<form action="login.php" method="post" onSubmit="return validate()">
	<h2>Username:</h2> <input type="text" name="username" size="20"><br>
	<h2>Password:</h2> <input type="password" name="password" size="20"><br>
	<input type="submit" value="Log In">
	</form>
	<a href="register.php">Register</a>
	<form action="forgotpass.php" method="post">
		<p><strong>Forgot Password</strong></p>
		<p>Username: 
		<input type="text" name="username" size="20"></p>
		<input type="submit" value="Re-Send">
	</form>
    ';
    }
    
	else
	{
	echo '
	<p>Welcome ' . $firstname . '!</p>';
	}
	
    ?>
    
    </div> <!-- end of sidebar div -->
style1.css
Code:
html,body{height: 100%;}

* {margin: 0;padding:0;}

body{font-family:Arial, Verdana, Helvetica, sans-serif;background:#d0eae0;}

p {
font-size: 12px;
padding: 0;
margin: 0;
border: 0;
}

h1{
font-size:16px;
font-weight:100;
color: #19BDD3;
}

h2{
font-size:12px;
font-weight:100;
color: #CE6C65;
}

a {
text-decoration: none;
font-weight: bold;
}

a:link {
color: #CE6C65;
}

a:visited {
color: #CE6C65;
}

a:active {
color: #CE6C65;
}

a:hover {
color: #FE7070;
}

body{
color:#000000;
font: 12px Arial, Verdana, Helvetica, sans-serif;
text-align: center;
}
#header{
position:absolute;
top: 0;
left: 0;
height: 103px;
width: 100%;
background: #168FA1 url(images/header.png) repeat-x 0 0;
z-index:1;
}
#logo{
height: 103px;
width: 320px;
background: url(images/logo.png) no-repeat;
}

#sidebar,#content{min-height:100%;}

#sidebar{
width:218px;
float:left;
text-align: left;
}
#sidebar ul{padding-top:123px;list-style:none;}
#sidebar h1{padding: 123px 20px 0 20px;}
#sidebar p, a{padding: 0 20px;}
#sidebar form{padding: 10px 20px 0 20px;}
#sidebar input{margin: 4px 0 10px 0;}


#content{
border-left:4px solid #000;
text-align:left;
background:#ffffff;
}
#content h1{padding: 123px 20px 0 20px;}
#content p{padding: 10px 20px;}

head+body #content {overflow:auto;}
* html #content {float:left}
* html #content h1{height:1%;}

* html #sidebar, * html #content{ height:100%;}