Высота увеличивается от верхней

Question

я после двух див, которая выглядит идеально

Когда я добавить больше ссылок в NavBar ДИВОЙ этот увеличить высоту от верхнего перекрытия первого Div. Я показываю разные ссылки, основанные на доступе на уровне пользователя, у каждой учетной записи разные нет. навигационных ссылок. Поэтому я просто не могу исправить свое положение и работать с ним. Я хочу, чтобы увеличить ее высоту от нижней

Вот код, я использую

<div class="content"> 
<img src="/img/logo2.png" id="logo" /> 
<div id="loggedUser"> 
<div class="blockTitle">Logged User Details</div> 
<table> 
    <tr> 
     <td>Welcome</td> 
     <td><?php echo $name;?></td> 
    </tr> 
    <tr> 
     <td>Username</td> 
     <td><?php echo $username;?></td> 
    </tr> 
    <tr> 
     <td>Last Login IP</td> 
     <td><?php echo $last_login_ipv4;?></td> 
    </tr> 
    <tr> 
     <td>Last Login </td> 
     <td><?php echo $last_login_time;?></td> 
    </tr> 
    <tr> 
     <td>Email</td> 
     <td><?php echo substr($email,0,3) . "****". substr($email,-10);?></td> 
    </tr> 
    <tr> 
     <td>Access Level</td> 
     <td><?php echo $access_level;?></td> 
    </tr> 
</table> 
</div> 
<div id="navigation"> 
<div class="blockTitle">NavBar</div> 
<span class="navlinks"><i class="material-icons">perm_media</i><a href="photos">Photos</a></span> 
<span class="navlinks"><i class="material-icons">build</i><a href="#">Settings</a></span> 
<span class="navlinks"><i class="material-icons">power_settings_new</i><a href="/logged/logout">Logout</a></span> 
</div> 
</div> 

CSS код

body > div.content > div{ 
    position:relative; 
    display:inline-block; 
    border: 1px solid #E9EAED; 
    box-shadow:0px 0px 1px #E9EAED; 
    background: #ffffff; 
    border-radius: 2px; 
    padding:10px; 
} 
body >div.content >div div{ 
    display:block; 
    border:none; 
    margin:2px 10px;  
} 
div.content .blockTitle{ 
display:block; 
text-align:center; 
border:none; 
background:#1DB6F0; 
color:#ffffff; 
width:100%; 
margin:0px; 
padding:5px 0px; 
} 
.navlinks{ 
margin:auto 10px; 
} 
/*Left Window.php*/ 
table{ 
    table-layout:fixed; 
} 
#loggedUser td{ 
    width:100px; 
} 
td:first-of-type{ 
    font-weight:400; 
} 
#navigation span{ 
    display:block; 
} 
#navigation .material-icons{ 
    position: relative; 
    top: 6px; 
    margin-right: 21px; 
} 

#loggedUser,#navigation{  
    width:300px;  
} 
#navigation{  
    top: 392px; 
    left: -326px; 
    margin-top:-392px; 
} 

Я попытался изменить div display:block как это было предложено @ Fazil Abdulkhadar в ответ, и он отлично работал в это время, но позже я добавил больше ссылок, теперь он делает то же самое в разных столбцах

Админ счет имеет больше ссылок, чем сотрудник

В аккаунте работника выглядит хорошо

Answer 1

Пожалуйста, обновите ваш следующий класс. Добавить display: inline-table; вместо display: inline-block; классу body > div.content > div.

body > div.content > div { 
    position: relative; 
    display: inline-table; 
    border: 1px solid #E9EAED; 
    box-shadow: 0px 0px 1px #E9EAED; 
    background: #ffffff; 
    border-radius: 2px; 
    padding: 10px; 
}