Space issue in div box alignment - html

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%;
}