form running into footer

[lostty84]

please my reg for is running into the footer, not a good designer, below is my css

/*
CSS for Reacheasy site
*/
	body,html {
 	margin: 0;
}
 
#page {
 	width: 1060px;
 	margin: 0 auto;
 	position: relative
 	/* is the same as: 
 	margin-top: 0;
 	margin-bottom: 0;
 	margin-left: auto;
 	margin-right: auto;
 */
}
 
/* sticky footer */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* ...#003399;#383838; */
/*
CSS for Reacheasy site
*/
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
background:#003399;
}
#outer {
    width:1060px;
    margin:auto;
    min-height:100%;
    margin-top:-52px;
    border-left:1px solid black;
    border-right:1px solid black;
background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top    
}
* html #outer {
    height:100%
}
h1 {
    font-size: xx-large;
    color: white;
    padding: 2em 0 .2em .4em;
    margin: 0;
    background: url(img/header.jpg) repeat-y right;
}
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: .2em 0;
    margin:0;
    background: url(img/tabs.gif);
}
ul#nav li {
    background: #48f url(img/tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
    border-right: 1px solid #A1A1A1;
}
ul#nav a {
    background: url(img/tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}
ul#nav li.current {
    background-color: #48f;
    background-position: 0 -60px;
}
ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}
#navigation {
    width: 180px;
    float:left;
}
 
#navigation li {
    margin: 0 1px 0 0;
    padding-left: 0px;
    text-decoration: none;
   list-style: none;
}
#navigation a {
    color: #008;
    padding-right: 10px;
    text-decoration: none;
}
 
#navigation a:visited{
 color: #008;
}
 
#bodycontent {
    float:right;
    width:880px;
    position:absolute;
    top: 200px;
 
}
 
 
form.rl{
	padding:0;
	margin:0;
	margin-top:-15px;
	line-height:150%;
 
}
 
form.rl label {
	font-weight:bold;
	font-size: small;
}
 
form.rl label.fixedwidth{
	display:block;
	width: 240px;
 
}
 
form.rl .buttonarea input{
colour: white;
font-weight; bold;
padding: 5px;
border: 1px solid white;
}
 
#header {
    width:100%;
    border-top:52px solid #fff;
    border-bottom:1px solid #A1A1A1;
}
#footer {
    width:1060px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    background-color:#fff;
    border-bottom:1px solid #000;
    color:  #000000;
    text-align:center;
    margin:0 auto;  
}
 
ul#footlink {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
}
 
ul#footlink li { 
display: inline;
text-align:center; 
}

my reg form

<?php require_once("include/dataconnect.php");?>
<?php require_once("include/functions.php");?>
<?php include("include/mheader.php");?>

<div id="bodycontent">
<div>
<?php
echo "<h2>Register</h2>";

$submit = $_POST['register'];
//form data
$fullname = mysql_real_escape_string(htmlentities(strip_tags($_POST['fullname'])));
$username = strtolower(mysql_real_escape_string(htmlentities(strip_tags($_POST['username']))));
$password = mysql_real_escape_string(htmlentities(strip_tags($_POST['password'])));
$repeatpassword = mysql_real_escape_string(htmlentities(strip_tags($_POST['repeatpassword'])));
$email = mysql_real_escape_string(htmlentities(strip_tags($_POST['email'])));

if ($submit)
{
$namecheck = mysql_query("SELECT username FROM reusers WHERE username='$username'");
$count = mysql_num_rows($namecheck);

if($count!=0)
{
die("Username already taken!");

}


//check for registration form details
    if ($fullname&&$username&&$password&&$repeatpassword&&$email)
{

if ($password==$repeatpassword)
{
//check char lenght of username and fullname
if (strlen($username)>25||strlen($fullname)>25)
{
echo "Lenght of username or fullname is too long";
}
else
{
//check password length
if(strlen($password)>25||strlen($password)<6)
{
echo"Password must be between 6 and 25 characters";
}
else
    {
       //generate random code
       $code = rand(11111111,99999999);
       
       //send activation email
       $to = $email;
       $subject = "Activate your account";
       $headers = "From: donotreply@reacheasy.co.uk";
       $body = "Hello $username,\n\nYou registered and need to activate your account. Click the link below or paste it into the URL bar of your browser\n\nhttp://reacheasy.co.uk/activate.php?code=$code\n\nThanks!";

       if (!mail($to,$subject,$body,$headers))
           echo "We couldn't sign you up at this time. Please try again later.";

else

{
//register the user!
//encript password
$password = md5($password);
$repeatpassword = md5($repeatpassword);


$queryreg = mysql_query("

INSERT INTO reusers VALUES ('','$fullname','$username','$password','$email','$code','0')

");

die("You have been registered successfully! Please check your email ($email) to activate your account<a href='rl.php'>Return to login page</a>");
}
}
}
}
else
    echo"Your passwords do not match!";

}
else
        echo "Please fill in <b>all</> fields!";

}
?>
</div>
<p>
<form action='reregister.php' method='Post' class='rl'>
    <div>
    <label for='fullname' class='fixedwidth'>Your full name</label>
    <input type='text' name='fullname' id='username' value='<?php echo $fullname; ?>'/>
    </div>
    
    <div>
    <label for='username' class='fixedwidth'>Choose a user name</label>
    <input type='text' name='username' id='username' value='<?php echo $username; ?>'/>
    </div>
    
    <div>
    <label for='password' class='fixedwidth'>Choose a password</label>
    <input type='password' name='password' id='password'/>
    </div>
    
    <div>
    <label for='repeatpassword' class='fixedwidth'>Repeat your password</label>
    <input type='password' name='repeatpassword' id='repeatpassword'/>
    </div>
    
    <div>
    <label for='email' class='fixedwidth'>E-mail</label>
    <input type='text' name='email' id='email'/>
    </div>
    
    <h2>Personal details</h2>
    
    <div>
    <label for='houseno' class='fixedwidth'>HOUSE NAME/NO</label>
    <input type='text' name='houseno' id='houseno' />
    </div>
    
    <div>
    <label for='address1' class='fixedwidth'>ADDRESS LINE 1</label>
    <input type='text' name='address1' id='address1' />
    </div>
    
    <div>
    <label for='address2' class='fixedwidth'>ADDRESS LINE 2</label>
    <input type='text' name='address2' id='address2' />
    </div>
    
    <div>
    <label for='address3' class='fixedwidth'>ADDRESS LINE 3</label>
    <input type='text' name='address3' id='address3' />
    </div>
    
    <div>
    <label for='county' class='fixedwidth'>COUNTY/LGA</label>
    <input type='text' name='county' id='county' />
    </div>
    
    <div>
    <label for='state' class='fixedwidth'>STATE</label>
    <input type='text' name='state' id='state' />
    </div>
    
    <div>
    <label for='country' class='fixedwidth'>COUNTRY</label>
    <input type='country' name='country' id='country' />
    </div>
    
    
    <div class='buttonarea'>
            <p>
            <input type='submit' name='register' value='Register'>
            </p>
            </div>
            </p>

</form>
</div>
</div>

<?php include("include/footer.php");?>

[Paul O'B]

HI,

Can you post the html from view source rather than the PHP please

[lostty84]

<!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>Reacheasy - Foremost website for easy reach of things globally</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="members.css" rel="stylesheet" type="text/css"/>  
</head>
  <body>
<div id="outer">
<div id="page">
<div id="header">

<h1>Reacheasy <span style="font-size:small;"></span></h1> 
  <ul id="nav">
    <li class="current"><a href="index.php">Home</a></li>
     <li><a href="women.php">Women</a></li>
     <li><a href="men.php">Men</a></li>
     <li><a href="children.php">Children</a></li>
     <li><a href="homeandappliances.php">Home&amp;Appliances</a></li>

     <li><a href="visionandsound.php">Vision&amp;Sounds</a></li>
      <li><a href="motoring.php">Motoring</a></li>
      <li><a href="homemore.php">More</a></li>
      <li><a href="homecontact.php">Contact us</a></li>
  </ul>
</div> <!--end of navigation div -->

</div>
<div id="bodycontent">
<div>
<h2>Register</h2></div>
<p>
<form action='reregister.php' method='Post' class='rl'>
	<div>
	<label for='fullname' class='fixedwidth'>Your full name</label>
	<input type='text' name='fullname' id='username' value=''/>
	</div>
	
	<div>

	<label for='username' class='fixedwidth'>Choose a user name</label>
	<input type='text' name='username' id='username' value=''/>
	</div>
	
	<div>
	<label for='password' class='fixedwidth'>Choose a password</label>
	<input type='password' name='password' id='password'/>
	</div>
	
	<div>

	<label for='repeatpassword' class='fixedwidth'>Repeat your password</label>
	<input type='password' name='repeatpassword' id='repeatpassword'/>
	</div>
	
	<div>
	<label for='email' class='fixedwidth'>E-mail</label>
	<input type='text' name='email' id='email'/>
	</div>
	
	<h2>Personal details</h2>

	
	<div>
	<label for='houseno' class='fixedwidth'>HOUSE NAME/NO</label>
	<input type='text' name='houseno' id='houseno' />
	</div>
	
	<div>
	<label for='address1' class='fixedwidth'>ADDRESS LINE 1</label>
	<input type='text' name='address1' id='address1' />
	</div>

	
	<div>
	<label for='address2' class='fixedwidth'>ADDRESS LINE 2</label>
	<input type='text' name='address2' id='address2' />
	</div>
	
	<div>
	<label for='address3' class='fixedwidth'>ADDRESS LINE 3</label>
	<input type='text' name='address3' id='address3' />
	</div>

	
	<div>
	<label for='county' class='fixedwidth'>COUNTY/LGA</label>
	<input type='text' name='county' id='county' />
	</div>
	
	<div>
	<label for='state' class='fixedwidth'>STATE</label>
	<input type='text' name='state' id='state' />
	</div>

	
	<div>
	<label for='country' class='fixedwidth'>COUNTRY</label>
	<input type='country' name='country' id='country' />
	</div>
	
	
	<div class='buttonarea'>
			<p>
			<input type='submit' name='register' value='Register'>
			</p>

			</div>
			</p>

</form>
</div>
</div>

<div id="footer">
<ul id="footlink">
     <li><a href="contact.html">Contact us</a></li>
     <li><a href="termsandcondition.html">Terms&amp;Condition</a></li>

     <li><a href="right.html">Copyright</a></li>
     <li><a href="faq.html">Faq</a>
</li>
</ul>
</div>
</body>
</html>

[Paul O'B]

Hi,

The problem is that you have made your bodycontent element position:absolute and as such it will not take part in the flow of the document and will not care about your footer. You need to float the bodycontent if you want to divide the section into columns (or don't float it if its only one column).

#bodycontent {
	float:right;
	width:880px;
/*	position:absolute;
	top: 200px;*/
}

You can't use absolute elements for variable height content and still maintain the flow of the document.

The rest seems to be ok.

[lostty84]

thanks it worked