Space issue in div box alignment

Question

Am designing the 'Login' page, here, the page look okay before I press the submit button, but, just after I pressed the submit button, it looks not okay. The second div moved little bit downward. Any help to solve this issue? pls refer the below image

html

<div class="LogIn">
    <form id="UserLogIn" name="loginForm" method="post"> <!-- onsubmit="return validateForm(this);" -->
    <label>Firstname Lastname</label><input type="text" name="username" placeholder="Firstname Lastname"/>
    <span class="user-name">Name should not be empty</span>
    <label>Password</label><input type="password" name="password" placeholder="Password"/>
    <label>Confirm password</label><input type="password" name="password1" placeholder="Confirm password"/>
    <span class="password">Password does not be match</span>
    <label>Email</label><input type="email" name="email" placeholder="Email"/>
    <span class="email">Email is not valid</span>
    <label>Website</label><input type="url" name="url" placeholder="Website"/>
    <span class="urlcontent">Invalid Website URL</span>
    <input name="submit" type="submit" value="Submit"/>
    </form>
    </div>
    <div class="BusinessConnect">
    <p>Business Unit</p>
    <div id="BuCheck" class="BusinessCont">
    <p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Sapient"/><label for="checkbox1" class="form-label">Test</label></p>

    <p><input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="SapientNitro"/><label for="checkbox2" class="form-label">TestNitro</label></p>
    <p><input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Test Global Market"/><label for="checkbox3" class="form-label">Test Global Market</label></p>
    <p><input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Test Government Services"/><label for="checkbox4" class="form-label">Test Government Services</label></p>
    <p><input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="Test (m)PHASIZE"/><label for="checkbox5" class="form-label">Test (m)PHASIZE</label></p>

    </div>
    </div>

css

.BusinessConnect {
    float: left;
    font-size: 80%;
    height: 30%;
    margin-right: 0;
    position: relative;
    top: 3px;
    width: 35%;
}
.LogIn {
    float: left;
    margin-left: 256px;
    margin-top: 15px;
    width: 30%;
}

After the 'submit' button pressed,

Answer 1

One of the way you can follow is by seperating the divs like this,

<section>
<div id="LogIn">
    You can put your thing here    
</div>

    <div id="BusinessConnect">
    <p>Business Unit</p>
       Your second part
    </div>

</section>


/// Your CSS
    section {
    width: 100%;
    height: 200px;
    margin: auto;
    padding: 10px;
    }
    div#BusinessConnect {
        border:1px solid #000000;
        margin-left:50%;
        height: 200px;   
    }
    div#LogIn {
        width: 45%;
        float: left;
        border:1px solid #000000;
        height:200px;
    }

Its just a sample, you can further work on it. And I myself prefer using % instead of pixels, because they are helpful for responsive layouts.

Answer 2

Many different ways to accomplish what you'd like, but if floating isn't a necessity you could try the following:

.BusinessConnect {
  display: table-cell;
  vertical-align: top;
  font-size: 80%;
  height: 30%;
  margin-right: 0;
  position: relative;
  top: 3px;
  width: 35%;
}
.LogIn {
  display: table-cell;
  vertical-align: top;
  margin-left: 256px;
  margin-top: 15px;
  width: 30%;
}