CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3407039
user3407039

Reputation: 1335

CSS to create side menu

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?

Upvotes: 0

Views: 117

Answers (6)

m4n0
m4n0

Reputation: 32285

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

BootPly Demo

Sample Image here

Upvotes: 0

user4563161
user4563161

Reputation:

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.

Upvotes: 0

Dinei
Dinei

Reputation: 5444

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%;)

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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

Upvotes: 0

keikoku92
keikoku92

Reputation: 151

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.

Upvotes: 0

Honore Doktorr
Honore Doktorr

Reputation: 1625

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.

Upvotes: 0

Related Questions