I have created a jsfiddle here:
http://jsfiddle.net/sawaira/owkvq9bo/8/
<table>
<tr>
<td class="navbar-text">RunAs:</td>
<td>
<input type="text" id="RunAs" class="form-control" value="" onchange="onchangeRunAs()" onkeypress="searchKeyPress(event)" />
</td>
<td>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">
</li>
<li>
<a href="/Account/SignOut">Sign out</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float:left; background-color:#222222; height:100%; width:70px; position:fixed;">
<br />
<center><a href="/Home/abc"><img src="../../Content/images/.png" title="abc" /></a></center><br /><br />
<center><a href="/Home/adfadf"><img src="../../Content/images/time.png" title="adfa-Balance" /></a></center><r />
/>
/>
</div>
</div>
<div class="container body-content" id="content" style="margin-left:70px;width:1700px">
<table cellpadding="0">
<tr valign="bottom">
<td><img src="../../Content/images/cal48.png"></td>
<td><h2><span class="label label-primary">My Personal Dashboard</span></h2></td>
</tr>
</table>
<body>
<div >
<!-- This is the HTML element that will be used to render the KeyLines component -->
<div id="page" class="pagestyle">
</div>
<div style="position:relative;height:700px; width:1500px;">
<div id="loading" style="position:absolute;height:700px; width:1200px;">
<marquee id="loading-image" behavior="alternate" scrollamount="30">Initializing</marquee>
</div>
<div id="kl" style="position:relative;height:700px; width:1200px;float:left;border: 2px solid #0094ff;overflow:hidden" class="listControl" >
<div style="clear:both;"></div>
</div>
Essentially, on scrolling the blue borders overlap with the nav bar. I do not want this to happen, but not sure what is the cause.
I cannot change the height/width to be auto, as it has to meet some requirements.Otherwise the page does not display the contents properly.
All help will be greatly appreciated.