CSS to create side menu - html

Question

At the moment my html page has 2 divs that hold all the information on the page one underneath the other. Now I want there to be a side bar to the left of them spanning down the entire page.
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
I would normally do this using the bootstrap grid template, however I am using an angular drag and drop library and using that (for some reason) messes up the animations when things are being moved around.
What would be the easiest way of adding in another div to act as a side menu always to the left of the two divs shown?

Answer 1

You can do something like this:
.sidebar {
background: #eee;
width: 100px;
height: 50px;
margin-right: -100%;
margin-bottom: 10px;
position: relative;
display: block;
overflow: visible;
float: left;
box-sizing: border-box;
}
.page-content {
background: #aaa;
margin-left: 100px;
}
<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar">
SIDEBAR<br>
AT LEFT;
</div>
</div>
<div class="page-content-wrapper">
<div class="page-content">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Trade-offs of this approach:
You need to put a fixed width to your sidebar (either by px, %, or anything)
You need either to have a fixed height or to let the sidebar has the height of the content (you can't put height: 100%;)

Answer 2

You can float a sidebar left, but to have it fill the page’s full height all its ancestor elements must have height: 100%. If .sidebar is directly under body, these styles will do it:
html, body, .sidebar { height: 100% }
.sidebar { float: left }
Sample, with tinted backgrounds to show block outlines.

Answer 3

I m not sure I understand entirely the question so I ll try to answer.
I would create a div with float left css to have a nav within for your left menu and if it has to be all along the page . And another div either float right or none to keep the 2 divs you created.

Answer 4

You can use flexbox (adjust your needs)
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
}
DEMO HERE

Answer 5

Wrap it all in a container with
display: table;
width: 100%;
table-layout: fixed;
then create a sidebar div with
display:table-cell;
vertical-align:top;
width:35%;
and wrap your content in a container with
display:table-cell;
vertical-align:top;
width:100%;
make sure your side bare is above your content for it to be on the left.
and that's you a flexible grid with a sidebar.

Answer 6

You can use col-md-3 and col-md-9 for sidebar and content respectively. Fix the sidebar using position: fixed
BootPly Demo