CODEWITHSUNDEEP
htmlcss
Kieran Lythgoe
Kieran Lythgoe

Reputation: 25

Element won't move across

I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?

body {
  padding: 0;
  margin: 0;
  background-color: #ccc;
}

#wrapper {
  width: 1000px;
  background-color: #FFF;
  margin: 0px auto;
  min-height: 400px;
  margin-top: 40px;
  border: 1px solid #999;
  border-bottom: 3px solid #999;
  border-radius: 5px;
}

#formDiv {
  width: 200px;
  margin: 0px auto;
  margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
  <title>Registration Page</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div id="wrapper">
    <div id="formDiv"></div>
    <form method="POST" action="index.php" enctype="multipart/form-data">
      <label>First Name:</label><br>
      <input type="text" name="fname" /> <br/><br/>
      <label>Last Name:</label><br>
      <input type="text" name="lname" /> <br/><br/>
      <label>Email:</label><br>
      <input type="text" name="email" /> <br/><br/>
      <label>Password:</label><br>
      <input type="password" name="password" /> <br/><br/>
      <label>Image:</label><br>
      <input type="file" name="image" /> <br/><br/>
      <input type="submit" name="submit" />
    </form>
  </div>
</body>
</html>

Upvotes: 1

Views: 48

Answers (2)

DraganAscii
DraganAscii

Reputation: 322

You closed your formdiv tag to early. Use this:

<html>

<head>
    <title>Registration Page</title>
    <link rel="stylesheet" href="css/styles.css" />
</head>

<body>

    <div id="wrapper">

    <div id="formDiv">

    <form method="POST" action="index.php" enctype="multipart/form-data">

    <label>First Name:</label><br>
    <input type="text" name="fname" /> <br/><br/>

    <label>Last Name:</label><br>
    <input type="text" name="lname" /> <br/><br/>

    <label>Email:</label><br>
    <input type="text" name="email" /> <br/><br/>

    <label>Password:</label><br>
    <input type="password" name="password" /> <br/><br/>

    <label>Image:</label><br>
    <input type="file" name="image" /> <br/><br/>

    <input type="submit" name="submit" /> 

    </form>


    </div>


</div>
</body>


</html>

Upvotes: 1

Kushtrim
Kushtrim

Reputation: 1939

If you need to center it, you also need to center form element

#wrapper form{
      width: 180px;
    margin: 0 auto;
}

http://jsfiddle.net/47ku1qud/

Upvotes: 0

Related Questions