Alignment problems in HTML and CSS

Question

I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.

As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.

/* -------------------------------- The body and div placement ------------------------------ */

#Body {
  text-align: center;
}

#Window_Container {
  width: 600px;
  height: 400px;
  margin: 100 auto;
}

#Logo_and_Slogan {
  background-image: url("wimage.png");
  height: inherit;
  width: 340px;
  float: left;
}

#Login_and_Sign_Up {
  height: inherit;
  width: 250px;
  margin-left: 10px;
  float: right;
}

#Login {
  text-align: center;
  background-color: aquamarine;
  height: 120px;
}

#Sign_Up {
  text-align: center;
  background-color: brown;
  height: 270px;
  margin-top: 10px;
}


/* -------------------------------- Modification of the form part        ------------------------------ */

input {
  float: right;
  margin: 3px 0 0 0;
}

select {
  float: right;
  margin: 3px 0 0 0;
}

label {
  float: left;
  margin: 5px 0 0 0;
}

h2 {
  margin: 0 0 2px 0;
  padding: 3px;
  font-size: 20px;
}

<html>
<head>
   <link href="welcome.css" type="text/css" rel="stylesheet">
   <script src="client.js" type="text/javascript"></script>
   <script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
    <div id="Window_Container">
        <div id="Logo_and_Slogan"></div>
        <div id="Login_and_Sign_Up">
            <div id="Login">
                <h2>Login</h2>
                <form action="/action_page.php">
                    <label>Email</label> <input type="text" name="email"><br>
                    <label>Password</label> <input type="password" name="password"><br>
                    <br><input type="submit" value="Submit">
                </form> 
            </div>
            <div id="Sign_Up">
                <h2>Signup</h2>
                <form action="/action_page.php">
                    <label>First name</label> <input type="text" name="fname"><br>
                    <label>Family name</label> <input type="text" name="lname"><br>
                    <label>Gender</label>  <select name="gender">
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select><br>
                    <label>City</label> <input type="text" name="city"><br>
                    <label>Country</label> <input type="text" name="country"><br>
                    <label>Email</label> <input type="text" name="email"><br>
                    <label>Password</label> <input type="password" name="password"><br>
                    <label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
                    <br><br><br><input type="submit" value="Submit">
                    </form> 
                </div>
            </div>
        </div>
    </body>
</html>

@giorgio You can use better language here. How about that screws it all up? — Blue
– Blue, Commented Feb 1, 2018 at 16:16
If you're depending on float, you're gonna need some clears. — Daniel Beck
– Daniel Beck, Commented Feb 1, 2018 at 16:22
Added the entire html code and removed the divs from before and after each label and input pair since they make no difference at this moment. — LuckAss
– LuckAss, Commented Feb 1, 2018 at 16:23
@Pete Spot on, clear: both made everything fall in line even better! — LuckAss
– LuckAss, Commented Feb 1, 2018 at 16:31

Jeremy Thille · Accepted Answer · 2018-02-01 16:41:01Z

As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :

#Login_and_Sign_Up {
  height: inherit;
  width: 250px;
  margin-left: 10px;
  float: right;
}

#Login {
  text-align: center;
  background-color: #7fffd4;
  padding: 5px;
}

#Sign_Up {
  text-align: center;
  background-color: #a52a2a;
  margin-top: 10px;
  padding: 5px;
}

form div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  border: #00f dashed 1px;
  margin-bottom: 2px;
}

form div input {
  width: 120px;
}

form div select {
  width: 124px;
}

<div id="Login_and_Sign_Up">

  <div id="Login">
    <h2>Login</h2>
    <form action="/action_page.php">
      <div><label>Email</label> <input type="text" name="email"></div>
      <div><label>Password</label> <input type="password" name="password"></div>
      <br><input type="submit" value="Submit">
    </form>
  </div>
  
  <div id="Sign_Up">
    <h2>Signup</h2>
    <form action="/action_page.php">
      <div><label>First name</label> <input type="text" name="fname"></div>
      <div><label>Family name</label> <input type="text" name="lname"></div>
      <div><label>Gender</label>
        <select name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
				</select></div>
      <div><label>City</label> <input type="text" name="city"></div>
      <div><label>Country</label> <input type="text" name="country"></div>
      <div><label>Email</label> <input type="text" name="email"></div>
      <div><label>Password</label> <input type="password" name="password"></div>
      <div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
      <br><input type="submit" value="Submit">
    </form>
  </div>
  
</div>

user5722540 · Accepted Answer · 2018-02-01 16:27:04Z

2

You can us tabular forms, they are easy to manage.

form{
background-color:red
}
H1{
text-align:center
}

<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
  <table style="width:100%">
  <tr>
    <td>Email</td>
    <td><input type="text" name="firstname"></td>
  </tr>

  <tr>
    <td>Password</td>
    <td><input type="text" name="firstname"></td>
  </tr>

</table>

  <input type="submit" value="Submit">
</form> 

</body>
</html>

edited Feb 1, 2018 at 16:27

answered Feb 1, 2018 at 16:20

user5722540

6009 silver badges25 bronze badges

4 Comments

Jeremy Thille Over a year ago

I also use tables, they're super-robust for layouts, but for some reason, most developers will tell you not to use them.

user5722540 Over a year ago

tabular layouts are extremely efficient, they load synchronously and are an ambient way to produce cool layouts

user5722540 Over a year ago

@JeremyThille thanks for the input. Though I believe in only providing hints to a question, will provide detail answer next time :)

Daniel Beck Over a year ago

"for some reason, most developers will tell you not to use them" It's fun watching history go round in circles. Tables initially got a bad reputation because people didn't want to learn CSS and used overcomplicated tables for layout. It got to the point where people would sniff at you for even using tables for tabular data.

Johannes · Accepted Answer · 2018-02-01 16:45:03Z

1

Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")

/* -------------------------------- The body and div placement ------------------------------ */

#Body {
  text-align: center;
}

#Window_Container {
  width: 600px;
  height: 400px;
  margin: 100 auto;
}

#Logo_and_Slogan {
  background-image: url("wimage.png");
  height: inherit;
  width: 340px;
  float: left;
}

#Login_and_Sign_Up {
  height: inherit;
  width: 250px;
  margin-left: 10px;
  float: right;
}

#Login {
  text-align: center;
  background-color: aquamarine;
  height: 120px;
}

#Sign_Up {
  text-align: center;
  background-color: brown;
  height: 270px;
  margin-top: 10px;
}


/* -------------------------------- Modification of the form part        ------------------------------ */

input {
  float: right;
  margin: 3px 0 0 0;
}

select {
  float: right;
  margin: 3px 0 0 0;
}

label {
  float: left;
  margin: 5px 0 0 0;
  clear: left;
}

h2 {
  margin: 0 0 2px 0;
  padding: 3px;
  font-size: 20px;
}

<html>
<head>
   <link href="welcome.css" type="text/css" rel="stylesheet">
   <script src="client.js" type="text/javascript"></script>
   <script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
    <div id="Window_Container">
        <div id="Logo_and_Slogan"></div>
        <div id="Login_and_Sign_Up">
            <div id="Login">
                <h2>Login</h2>
                <form action="/action_page.php">
                    <label>Email</label> <input type="text" name="email"><br>
                    <label>Password</label> <input type="password" name="password"><br>
                    <br><input type="submit" value="Submit">
                </form> 
            </div>
            <div id="Sign_Up">
                <h2>Signup</h2>
                <form action="/action_page.php">
                    <label>First name</label> <input type="text" name="fname"><br>
                    <label>Family name</label> <input type="text" name="lname"><br>
                    <label>Gender</label>  <select name="gender">
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select><br>
                    <label>City</label> <input type="text" name="city"><br>
                    <label>Country</label> <input type="text" name="country"><br>
                    <label>Email</label> <input type="text" name="email"><br>
                    <label>Password</label> <input type="password" name="password"><br>
                    <label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
                    <br><br><br><input type="submit" value="Submit">
                    </form> 
                </div>
            </div>
        </div>
    </body>
</html>

Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.

edited Feb 1, 2018 at 16:45

answered Feb 1, 2018 at 16:30

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

9 Comments

Jeremy Thille Over a year ago

Your snippet looks all messed up to me. The male select is under "Gender", the last input is glued to the right of the submit button...

Johannes Over a year ago

@JeremyThille Hmm - here it looks perfect. I wonder what it is that makes the difference. Which browser and OS are you on?

Jeremy Thille Over a year ago

Chrome and windows 7

LuckAss Over a year ago

@Johannes Exactly what needed to be done, as I discussed with Pete in the comments above putting a clear: both to the br tag worked magic.

Johannes Over a year ago

@JeremyThille just make the container a little bit wider - obviously the input fields in chrome are wider by default and don't fit into ine line with the longer labels ("Family Name" and "Repeat PSW"), the awkward shifting then is caused by that fact and by the float settings.

|

Daniel Beck · Accepted Answer · 2018-02-01 16:44:43Z

Let's do some cleanup and simplification here.

First off we'll get rid of all those <br> tags. Don't need 'em.

Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.

#Login_and_Sign_Up {
  width: 250px;
  margin-left: 10px;
}

#Login {
  background-color: aquamarine;
}

#Sign_Up {
  background-color: brown;
  margin-top: 10px;
}

label {
  width: 80px;  /* adjust to taste */
  display:inline-block
}

<div id="Login_and_Sign_Up">
  <div id="Login">
    <h2>Login</h2>
    <form action="#">
      <div><label>Email</label> <input type="text" name="email"></div>
      <div><label>Password</label> <input type="password" name="password"></div>
      <input type="submit" value="Submit">
    </form>
  </div>
  <div id="Sign_Up">
    <h2>Signup</h2>
    <form action="/action_page.php">
      <div><label>First name</label> <input type="text" name="fname"></div>
      <div><label>Family name</label> <input type="text" name="lname"></div>
      <div><label>Gender</label> 
        <select name="gender">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </div>
      <div><label>City</label> <input type="text" name="city"></div>
      <div><label>Country</label> <input type="text" name="country"></div>
      <div><label>Email</label> <input type="text" name="email"></div>
      <div><label>Password</label> <input type="password" name="password"></div>
      <div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
      <input type="submit" value="Submit">
    </form>
  </div>
</div>

Further improvements that could be made:

For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.

Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.

pixlboy · Accepted Answer · 2018-02-01 16:37:11Z

Use CSS Flexbox

I have done it for the login form, you can repeat the same for sign-up as well. Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.

    #Body {
      text-align: center;
    }

    #Window_Container {
      width: 600px;
      height: 400px;
      margin: 100 auto;
    }

    #Logo_and_Slogan {
      background-image: url("wimage.png");
      height: inherit;
      width: 340px;
      float: left;
    }

    #Login_and_Sign_Up {
      height: inherit;
      width: 250px;
      margin-left: 10px;
      float: right;
    }

    #Login {
      text-align: center;
      background-color: aquamarine;
      height: 170px;
    }

    #Sign_Up {
      text-align: center;
      background-color: brown;
      height: 270px;
      margin-top: 10px;
    }


    /* -------------------------------- Modification of the form part        ------------------------------ */
    .flex-form p{
      display:flex;
    }
    
    input {
      flex: 1;
      margin: 3px 0 0 0;
      float:right;
    }

    select {
      flex: 1;
      margin: 3px 0 0 0;
      float:right;
    }

    label {
      flex: 1;
      margin: 5px 0 0 0;
      float:left;
      text-align:left;
    }

    h2 {
      margin: 0 0 2px 0;
      padding: 3px;
      font-size: 20px;
    }

    <html>
    <head>
       <link href="welcome.css" type="text/css" rel="stylesheet">
       <script src="client.js" type="text/javascript"></script>
       <script src="serverstub.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="Window_Container">
            <div id="Logo_and_Slogan"></div>
            <div id="Login_and_Sign_Up">
                <div id="Login">
                    <h2>Login</h2>
                    <form action="/action_page.php" class="flex-form">
                        <p>
                            <label>Email</label>
                            <input type="text" name="email">
                        </p>
                        <p>
                            <label>Password</label>
                            <input type="password" name="password">
                        </p>
                        <input type="submit" value="Submit">
                    </form> 
                </div>
        </body>
    </html>

Xoog · Accepted Answer · 2018-02-01 16:51:15Z

My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.

I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.

    #Login_and_Sign_Up {
        height: inherit;
        margin-left: 10px;
        /* float: right; */
    }
    
    #Login {
        background-color: aquamarine;
        overflow: hidden;
        width: 300px;
    }
    
    #Sign_Up {
        background-color: brown;
        margin-top: 10px;
        width: 300px;
        overflow: hidden;
    }
    
    label {
        min-width: 90px;
    }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
        <div id="Login">
            <h2>Login</h2>
            <form action="/action_page.php">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password">
                </div>
                <div class="form-group">
                    <input type="submit" value="Submit">
                </div>
            </form>
        </div>
        <div id="Sign_Up">
            <h2>Signup</h2>
            <form action="/action_page.php">
                <div class="form-group">
                    <label for="firstname">First name</label>
                    <input type="text" name="fname" id="firstname">
                </div>
                <div class="form-group">
                    <label for="familyname">Family name</label>
                    <input type="text" name="lname" id="familyname">
                </div>
                <div class="form-group">
                    <label for="gender">Gender</label>
                    <select name="gender" id="gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" name="city" id="city">
                </div>
                <div class="form-group">
                    <label for="country">Country</label>
                    <input type="text" name="country" id="country">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password">
                </div>
                <div class="form-group">
                    <label for="repeat">Repeat PSW</label>
                    <input type="password" name="passwordrepeat" id="repeat">
                </div>
                <div class="form-group">
                    <input type="submit" value="Submit">
                </div>

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

Collectives™ on Stack Overflow

Alignment problems in HTML and CSS

6 Answers 6

Comments

4 Comments

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related