Divs не начинается с вершины контейнера

Question

У меня проблема с двумя divs, расположенными горизонтально по центру друг от друга: один из них начинается с вершины контейнера div, а другой нет. Я попытался исправить это, но нашел решения, которые были не очень красивыми или правильными.

Вот как это:

<div id="missingSchoolProgram"> 
    <div id="missingSchool"> 
     <p>Votre école n'est pas dans la liste? Remplissez ce court formulaire afin de nous le signaler et qu'elle soit ajoutée plus rapidement!</p> 
     <br /><br /><br /> 
     <form action="missingSchoolMail.php" method="POST"> 
      <p>Nom de l'école:</p> 
      <input type="text" name="name" required="required" /><br /><br /><br /> 
      <input type="submit" name="submit" value="Signaler l'école manquante" /><br /> 
     </form> 
    </div> 
    <div id="missingProgram"> 
     <p>Votre programme n'est pas dans la liste? Remplissez ce court formulaire afin de nous le signaler et qu'il soit ajouté plus rapidement!</p> 
     <br /><br /><br /> 
     <form action="missingProgramMail.php" method="POST"> 
      <p>Nom du programme:</p> 
      <input type="text" name="name" required="required" /><br /> 
      <p>ID du programme (Ex.: 210.C1):</p> 
      <input type="text" name="programID" maxlength="6" required="required" /><br /><br /><br /> 
      <input type="submit" name="submit" value="Signaler le programme manquant" /><br /> 
     </form> 
    </div> 
</div> 

CSS-код для этой дивы выглядит следующим образом ...

#missingSchoolProgram 
{ 
    width: 100%; 
    text-align: center; 
    border-top: 1px solid #e2e2e2; 
    padding-top: 15px; 
} 

#missingSchoolProgram form 
{ 
    background-color: #e7edf1; 
    border: 1px solid #ccdce4; 
    padding: 15px; 
    text-align: center; 
} 

#missingSchool 
{ 
    width: 250px; 
    text-align: center; 
    padding: 15px; 
    border: 1px solid black; 
    display: inline-block; 
} 

#missingProgram 
{ 
    width: 250px; 
    text-align: center; 
    padding: 15px; 
    border: 1px solid black; 
    display: inline-block; 
} 

И jsfiddle так что вы, ребята, можете увидеть проблему ... http://jsfiddle.net/7taEu/1/

Эти вещи отлично работали до того, как серверы GoDaddy перепутались, и мой сайт был возвращен к последнему сохранению ...

Answer 1

Добавить: vertical-align: top - #missingSchool.

http://jsfiddle.net/7taEu/3/

Answer 2

Я думаю, вы должны добавить поплавком: слева; к элементу #missingSchool.

#missingSchool 
{ 
    width: 250px; 
    text-align: center; 
    padding: 15px; 
    border: 1px solid black; 
    display: inline-block; 
    float: left; 
} 

http://jsfiddle.net/7taEu/2/