Height increasing from top

Question

I have following two divs which looks perfect

When i add more links in navBar div it increase its height from top overlapping first Div. I am showing different links based on user level access every account has different no. of navigation links. So i just cannot fix its position and work with it. I want it to increase its height from the bottom

Here is the code i am using

<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 Code

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

I tried changing div display:block as suggested by @Fazil Abdulkhadar in answer and it worked fine that time but later i added more links now its doing same thing in different column

Admin account has more links than employee

In employee account looks fine

Answer 1

Please update your following class. Add display: inline-table ; instead of display: inline-block; to the body > div.content > div class.

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