title: Fixed header and sidebar but scrollable content and header area
body: <p>I am trying to create a horizontal scroll for the main content area. I have a header, sidebar and a div (wrapperContent). Basically the header and div (wrapperContent) should be scrollable horizontally like <a href="http://www.teamweek.com" rel="nofollow">TeamWeek</a>. The sidebar is fixed and will only scroll vertically</p>
  
  <p>On the class of my div wrapperContent i placed an overflow auto, which should enable me to scroll.</p>
  
  <p>Basically the yellow en red background should extant all the way and should be the only scrollable ones</p>
  
  <p>Working with angular</p>
  
  <p>Here is my codepen example -> <a href="http://codepen.io/GY22/pen/PqeoZv" rel="nofollow">http://codepen.io/GY22/pen/PqeoZv</a></p>
  
  <p>hmtl code: </p>
  
  <pre><code>&lt;!-- START HEADER --&gt;
  &lt;header&gt;
    &lt;div&gt;&lt;h1&gt;Timeline&lt;/h1&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;!-- END HEADER  --&gt;
  
  &lt;!-- START SIDEBAR --&gt;
  &lt;div id="sidebar" ng-app="DragDrop" ng-controller="AppCtrl"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="user in users" class="circular"&gt;
        &lt;p class="initials"&gt;{{user.initials}}&lt;/p&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- END SIDEBAR --&gt;
  
  &lt;!-- START CONTENT --&gt;
  &lt;div class="wrapperContent"&gt;
  
  &lt;/div&gt;
  &lt;!-- END CONTENT --&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>header{
    width: 100%;
    height:90px;
    background-color: yellow ;
  }
  
  #sidebar {
    position: fixed;
    width: 120px;
    height: 100%;
    background-color: #03A9F4;
    z-index: 33;
    margin-top: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-bottom: 100px
  }
  
  #userList {
    padding-bottom: 10px !important;
  }
  
  ul li {
    margin-left: -22px;
    list-style-type: none;
  }
  
  .circle {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: hotpink;
  }
  
  .initials {
    margin-left: 25px;
    padding-top: 30px;
    font-weight: bold;
    font-size: 18px;
  }
  
  .wrapperContent {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: red;
  }
  </code></pre>
  
  <p>angular code:</p>
  
  <pre><code>var contentEditor = angular.module("DragDrop", []);
  
  contentEditor.controller('AppCtrl', function($scope) {
  
    $scope.users = [{
      initials: 'GY'
    }, {
      initials: 'XX'
    }, {
      initials: 'KK'
    }, {
      initials: 'TT'
    }, {
      initials: 'AA'
    }, {
      initials: 'QQ'
    }, {
      initials: 'PP'
    }, {
      initials: 'SS'
    }, {
      initials: 'MM'
    }, {
      initials: 'RS'
    }, {
      initials: 'KL'
    }, {
      initials: 'CJ'
    }, {
      initials: 'RT'
    }, {
      initials: 'DJ'
    }, {
      initials: 'XG'
    }, {
      initials: 'XX'
    }];
  
  });
  </code></pre>