Космическая проблема в выравнивании поля div

Question

Я проектирую страницу «Вход», здесь страница выглядит нормально, прежде чем нажимать кнопку «Отправить», но сразу после нажатия кнопки «Отправить» это выглядит нехорошо. Второй div немного потянулся вниз. Любая помощь для решения этой проблемы? пожалуйста, обратитесь к ниже изображения

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

После нажатия кнопки 'Отправить' нажата,

Answer 1

Много различных способов сделать то, что вы хотите, но если плавающая не является необходимостью, вы можете попробовать следующее:

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

Answer 2

Один из пути вы можете следить является разделяющей дивы например,

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

Его просто образец, вы можете продолжить работу над ним. И я сам предпочитаю использовать% вместо пикселей, потому что они полезны для гибких макетов.