How to implement fixed sidebar correctly?

Use the content div as your container for the page.

.sidebar {
  position: fixed;
  width: 200px;
  height: 400px;
  background: #000;
}

.content {
  margin-left: 200px;
  height: 500px;
  width: auto;
  position: relative;
  background: #f00;
  overflow: auto;
  z-index: 1;
}

.info {
  width: 1440px;
  height: 300px;
  position: relative;
  background: #f55;
}

<div class="sidebar"></div>
<div class="content">
  <div class="info"></div>
</div>

Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.

Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/

edit: responsive sidebar

To have a responsive fixed sidebar, simply add a media-query.

Example:

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

Here’s another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/