Search code examples
htmlcssuser-interfacealignment

Specific text in label disturbing the alignment

I have a login page which takes a username and password. I am facing a very strange problem. When i put "Username" as label text in first label the text comes above the input but when i put "Password" as text for first label it comes normally that is side by side.

"Username" as text
"password" as text

Code for "Password" as text

 <div class="main" style="width: 25%;margin-left: 500px;" align="center">
                     <div style = "background-color:blue; color:#FFFFFF; padding:3px; "><b>Login</b></div>

                <div style = "margin:30px; color: black" class='inv'>

                   <form action = "" method = "post">
                   <br/>
                      <label>Password  :</label><input type = "text" id="username" name = "username" class = "box" value=""  required/><br /><br />
                      <label>Password  :</label><input type = "password" name = "password" id="password" class = "box" value=""  required /><br/><br />
                      <input type = "submit" value = " Submit " class=".btn-primary" /><br />
                   </form>

                   <div style = "font-size:11px; color:#cc0000; margin-top:10px"><?php error_reporting(0);echo $error; ?></div>

                </div>

             </div>
    </div>

Code for "username" as text

<div class="main" style="width: 25%;margin-left: 500px;" align="center">
                     <div style = "background-color:blue; color:#FFFFFF; padding:3px; "><b>Login</b></div>

                <div style = "margin:30px; color: black" class='inv'>

                   <form action = "" method = "post">
                   <br/>
                      <label>username:  :</label><input type = "text" id="username" name = "username" class = "box" value=""  required/><br /><br />
                      <label>Password  :</label><input type = "password" name = "password" id="password" class = "box" value=""  required /><br/><br />
                      <input type = "submit" value = " Submit " class=".btn-primary" /><br />
                   </form>

                   <div style = "font-size:11px; color:#cc0000; margin-top:10px"><?php error_reporting(0);echo $error; ?></div>

                </div>

             </div>

Please help!!

Solution

  • Like @Nawed Khan said, the source of your problem stems from your hard-coded styles. This line in particular causes the width to scale with the viewport (size of the browser window), and the margin-left pushes the div to the side by 500px, thus it won't be centered on a different browser or when the browser is resized.

    <div class="main" style="width: 25%;margin-left: 500px;" align="center">

    The short fix is to increase the width.

    <div class="main" style="width: 500px;margin: 0 auto;" align="center">

    Giving it a hard value can work for now.

    But that introduces it's own sets of scaling caveat for different screens, so if you're serious about making it work for different screens, consider looking into responsive design.