CODEWITHSUNDEEP
htmlcssforms
user2274752
user2274752

Reputation: 17

Footer not centered

This is the registration form .php

<?php
?>

<html>
<head>
 <title>Registration Form</title>
 <link href="register.css" rel="stylesheet" type="text/css" />
 </head>

 <body>
 <div id = "everything">

        <div id = "header">
        Register
        </div>

        <div id = "content">
        <div id = "regside">
                <form name="register" action="success.php" method="get" >
                    Username: <input name="username" type="text" maxlength="30" /><br><br>
                    Password: <input name="password" type="password" maxlength="30" /><br><br>
                    Confirm Password: <input name="cpassword" type="password" maxlength="30" /><br><br>
                    Lastname: <input name="lastname" type="text" maxlength="30" /><br><br>
                    Firstname: <input name="firstname" type="text" maxlength="30" /><br><br>
                    Middlename: <input name="middlename" type="text" maxlength="30" /><br><br>
                    Email Address: <input name="eemail" type="text" maxlength="30" /><br><br>
                    <input name="register" type="submit" value="Register" style = "width:100px; height:50px;" />
                </form>
            </div>
            <div id = "other">
            </div>

        </div>

        <div id = "footer">I am another footer :D</div>



</div>

and this is my css

body{
background-color:#C1F4F4;
height:600px;
width:800px;
float:center;
margin:auto;
padding-top:20px;
}
#everything{
-moz-border-radius: 15px;
border-radius: 15px;
background-color:#000;
float:center;
margin:auto;
overflow:hidden;
}

#header {
text-align: center;
color:#FFF;
font-size: 20px;
height:30px;
padding:10px;
}

#content{
background-color:#E6F2F2;
height:500px;
width:100%;
}
#regside{
color:#000;
float:right;
width:40%;
height:500px;
text-align: right;
padding: 20px;
}
#other{
background-image:url(photos/anime.png);
background-repeat:no-repeat;
background-size:100%;
height:500px;
width:50%;
float:left;
}
#footer{
color:#FFF;
height:10px;
width:100%;
margin: auto;
padding:10px;
text-align: center;
}

For a reason I can't find out it the footer text is not centered. It looks like it is centered with #other but both #other and #footer belong to #content and #other shouldn't be able to affect #footer.

Upvotes: 1

Views: 4970

Answers (4)

Ravi
Ravi

Reputation: 463

Try this new css

body{
    background-color:#C1F4F4;
    height:600px;
    width:800px;
    float:center;
    margin:auto;
    padding-top:20px;
    }
    #everything{
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color:#000;
    float:center;
    margin:auto;
    overflow:hidden;
    }

    #header {
    text-align: center;
    color:#FFF;
    font-size: 20px;
    height:30px;
    padding:10px;
    }

    #content{
    background-color:#E6F2F2;
    height:500px;
    width:100%;
    }
    #regside {
       color: #000000;
       float: right;
       height: 480px;
       margin-top: 20px;
       padding: 0 20px 0 0;
       text-align: right;
       width: 40%;
    }
    #other{
    background-image:url(photos/anime.png);
    background-repeat:no-repeat;
    background-size:100%;
    height:500px;
    width:50%;
    float:left;
    }
    #footer{
    color:#FFF;
    height:20px;
    width:100%;
    margin: auto;
    padding:10px;
    text-align: center;
    }

It's working properly..

Upvotes: 0

Samuel Cook
Samuel Cook

Reputation: 16828

#regside is bleeding into the footer. If you decrease the height of this, the text will move to the center.

#regside {
  height:460px
}

As of right now, the text is centralized between the left of the container and the left of the regside.

Upvotes: 1

jeroen
jeroen

Reputation: 91734

center is not a valid value for the float property, so this is not going to work:

float:center;

You should set the margin (at least left and right) to auto for the elements you want to center and for old IE verions you should add text-align: center; to its parent element.

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

Use margin: 0 auto; for #footer. float:center; margin:auto; are both invalid, and you use them both in multiple places.

Upvotes: 1

Related Questions