I am looking to incorporate a simple sidebar into an existing layout (content).
Here is what I have so far:
HTML
<div class="container">
<div class="side-menui">
</div>
....
</div>
Full HTML
<div class="container">
<div class="side-menui">
</div>
<div class="banner-navigation-containet clearfix">
<div class="navigation-container pull-left">
<nav class="navbar" role="navigation">
...
...
...
</div><!--End navigation-container-->
...
...
</div><!-- End banner-navigation-containet -->
...
...
...
...
....
</div><<!-- End row-->
<div class="panel">
...
...
</form>
</div>
<div class="panel2">
...
</div><<!-- End block-->
</div>
</div><<!-- End container-->
CSS
.container {
width: 1170px;
padding: 0;
}
div.side-menui {
position: relative;
left:-20px;
z-index: 5;
width:35px;
height:350px;
border:1px solid gray;
}
The issue at hand is that the side-menui div extends all content by its exact height.
My objective:
I have searched online for similar queries and experimented with other positioning options such as absolute or fixed, but the outcomes were not as desired. Am I overlooking a simpler solution?