Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5.
Below is a snippet of the code I have been working on:
<div class="container">
<div class="row">
<div class="span4" id="sidebar-left">
<h2 id="sidebar-head">Hello</h2>
<p>Look at this stuff, isn't it neat wouldnt you think my collection complete. Wouldn't you think im a girl a girl who has everything.</p>
<ul class="nav nav-tabs nav-stacked" id="sidenav">
<li><a href='#'>Home</a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<div class="span8" id="main">
<h1>Some Text Here </h1>
</div>
</div>
</div>
I attempted to fix the positioning issue by included the following CSS code, however, #main and #sidebar-left ended up overlapping each other:
#sidebar-left {
position:fixed;
}
#main {
background-color:#39C;
height: 1500px;
}
I am stuck as to what went wrong in my implementation. Any suggestions or feedback would be greatly appreciated.