title: What is the best way to seperate elements in HTML to minimize one element affecting another?
body: <p>i have written a password form in HTML and it has some good functionality however, i have just made a change and the css is effecting the elements. basically when i click on the different input boxes it effects the labels of my form by shifting them slightly up to down.</p>
  
  <p>here is a jsfiddle so people can see the change visibly. 
  <a href="https://jsfiddle.net/b6hv8wLh/" rel="nofollow">https://jsfiddle.net/b6hv8wLh/</a></p>
  
  <p>here is some code: </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="jumbotron" id="firstform"&gt;
      &lt;h1&gt;Sign up page&lt;/h1&gt; 
      &lt;form id="myform"&gt;
  
          &lt;label&gt;Username &lt;/label&gt; &lt;input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"&gt;&lt;br&gt;
  
          &lt;div class="pwordCheck"&gt;
              &lt;label&gt;Password &lt;/label&gt; &lt;input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"&gt;&lt;br&gt;
              &lt;label&gt;Confirm Password &lt;/label&gt;  &lt;input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip"&gt;
              &lt;span id="themessage" class="themessage"&gt;&lt;/span&gt;&lt;br&gt; 
          &lt;/div&gt;
  
          &lt;label&gt;Email &lt;/label&gt; &lt;input type="email" class="f1input" id="e-mail"/&gt;&lt;br&gt;
          &lt;div class="dropdown"&gt;
                &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;Select job
                &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Java Developer&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;SQL Developer&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Tester&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
          &lt;/div&gt;
          &lt;label&gt;Job Role&lt;/label&gt; &lt;input type="text" class="f1input"/&gt;&lt;br&gt;
  
          &lt;label&gt;Age &lt;/label&gt; &lt;input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/&gt;&lt;br&gt;
  
          &lt;label&gt;Can you drive? &lt;/label&gt; &lt;input type="text" class="f1input" id="drive" disabled/&gt;&lt;br&gt;
  
        &lt;input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/&gt;
      &lt;/form&gt;  
  
    &lt;/div&gt;
  </code></pre>
  
  <p>i have tried wrapping my form in various divs and trying to hit indivdual elements but it is still making changes. just to make clear, i am trying to get it to a stage where the user clicks the input and the labels do not change at all.</p>
  
  <p>many thanks</p>