0

I'm trying to make a form, but I can't get the input elements to stack properly.

After lots of testing, I found that it's the font-size that's causing the issue... when it's 20px or below, the inputs stack nicely and uniformly, however, when I put 21px or higher, there's a sizable gap between the top input and the rest below. I believe the reason 21px and above is an issue is because that makes all four inputs combined have a height taller than the parent element (form-element), which is strange that that can happen because that parent div doesn't have a defined height, so it should be set by that content...

body{
    font-family: helvetica, sans-serif;
    font-size: 150%;
}

input{
    font-size: 20px;
    border-radius: 5px;
    border: 1px solid grey;
    width: 320px;
    display: inline-block;
    background-color: orange;
    color: red;
    float: right;
    white-space: nowrap;
}
label{
    width: 120px;
    display: inline-block;
    background-color: pink;
    white-space: nowrap;
}

#wrapper{
    width: 600px;
    background-color: red;
    margin: 0 auto;
}

.form-element{
    background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="testFile.css" type="text/css">
    <title>Form</title>
</head>
<body>
   
   <div id="wrapper">
     
         <div class="form-element">
          <label for="email">Email</label>
          <input type="text" name="email" id="email" placeholder="e.g. yourname@gmail.com">
        </div>

       <div class="form-element">
          <label for="phone">Telephone</label>
          <input type="text" name="phone" id="phone">
        </div>

       <div class="form-element">
          <label for="password">Password</label>
          <input type="password" name="password" id="password">
        </div>

       <div class="form-element">
          <label for="passwordConfirm">Confirm</label>
          <input type="password" name="passwordConfirm" id="passwordConfirm">
        </div> 
   </div>
   
   <script type="text/javascript">
    
    
       
    </script>
    
</body>
</html>

Why does that gap occur and how can I prevent this?

J. Doe
  • 325
  • 1
  • 11
  • you need to clear float – Temani Afif Jul 03 '18 at 11:24
  • @TemaniAfif for which element(s)? – J. Doe Jul 03 '18 at 11:24
  • `clear:both` on `form-element` and then increase the font-size to see what happen – Temani Afif Jul 03 '18 at 11:26
  • as a side note float are out of the flow, so the height is defined by the non-float elements (the ones on the left) – Temani Afif Jul 03 '18 at 11:26
  • @TemaniAfif That fixed it! Thanks! Couple follow ups though. Why was there only one gap if there were multiple elements with floats? And why was it the top element specifically that was affected? – J. Doe Jul 03 '18 at 22:40
  • Because float are bad and that's why you need to clear them :) ... what is happening is that the first float element become bigger and pushs the bottom one outside of his container (the gap you see) and the second one will also push the third and so on .. so only the first one remain on it's place and all the other are pushed outside ... a bit strange but this is how float behave ;) – Temani Afif Jul 03 '18 at 23:47
  • @TemaniAfif Thanks! But why did this issue not occur when I did `float: left` on the labels? – J. Doe Jul 04 '18 at 11:02

0 Answers0