I have an illustration here to help explain my issue.
The problem I am facing is that the Sidebar is overlapping both my Content and Footer when the content consists of only small items.
In my _layout file, I'm referencing the sidebar like this:
<body>
<div class="page">
<div id="header">
<div id="menucontainer">
<ul id="nav">
MENUTABS
</ul>
</div>
</div>
<div id="main">
<div id = "sidebar">
@if (IsSectionDefined("SideBar"))
{
@RenderSection("SideBar", required: false)
}
else {
<p>Currently Unavailable, Sorry for the inconvenience</p>
}
</div>
@RenderBody()
</div>
<div id="footer">
<div id="copyright">FOOTER</div>
</div>
</div>
</body>
In my View file, I'm calling it like this:
@section SideBar
{
@{Html.RenderAction("Index", "Post");}
}
Below is my CSS code:
.page {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#main
{
clear: both;
padding: 10px 10px 10px 10px;
background-color: #fff;
}
#sidebar
{
float:left;
margin:200px 10px -30px 10px;
padding:10px -10px -10px 10px;
width:235px;
height:auto;
border: solid 2px black;
background-color:#9acbba;
}
footer,
#footer {
background-color: #fff;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
I would really appreciate any assistance in identifying the root cause of this issue. Thank you! T_T