<div class="row"> <!--Nav Bar --> <nav class="col-xs-3 bs-docs-sidebar hidden-print"> <div class="fixed"> Nav Placeholder<br/> Stays on Top! </div> </nav> <!--Main Content --> <div class="col-xs-9"> <section id="GroupA" class="group"> <h3>Group A</h3> <div id="GroupASub1" class="subgroup"> <h4>Group A Sub 1</h4> </div> <div id="GroupASub2" class="subgroup"> <h4>Group A Sub 2</h4> </div> </section> <section id="GroupB" class="group"> <h3>Group B</h3> <div id="GroupBSub1" class="subgroup"> <h4>Group B Sub 1</h4> </div> <div id="GroupBSub2" class="subgroup"> <h4>Group B Sub 2</h4> </div> </section> <section id="GroupC" class="group"> <h3>Group C</h3> <div id="GroupCSub1" class="subgroup"> <h4>Group C Sub 1</h4> </div> <div id="GroupCSub2" class="subgroup"> <h4>Group C Sub 2</h4> </div> </section> </div> </div>
.group { background: yellow; width: 200px; height: 500px; } .group .subgroup { background: orange; width: 150px; height: 200px; } .fixed { position: fixed; }