How to implement fixed sidebar correctly?

Question

I'm trying to accomplish this design: Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?

I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.

Is there a smarter way to achieve this? Thanks!

Onomatology

"correctly" is a subjective adjective. What is correct for you, may not be correct for the Google Standards, but may be correct for the Facebook's style guide. Could you please define what you wanted in the title with a few words? – Bubo

Answer 1

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/

Consequent

This is pretty much what I originally had. The problem is, the sidebar then overlaps the content when there is any horizontal scrolling. I suppose I need the sidebar to be fixed when scrolling vertically, but not when scrolling horizontally. – Onomatology

@Zach - i recreated the fiddle, but it is/was the same as code above. – Consequent

what if we want a fixed side bar with flexible width?? – Dreeda

@iamSiddharthYadav - You can replace the .sidebar{width} and .content{margin-left} with a percentage. With that it will act fluid. Personally I would use media-query to control the width and with that control the content inside. See my edit and the fiddle. – Consequent

What are the main reason margin-left=200px is used instead of just left=200px. – Cort

@TomasJansson - When using "left" the contet div will not adapt to the screen width. Instead it will stick out on the right. Try to do this in the fiddle and you will notice it. With margin-left the width of the content div will adapt. – Consequent

i have my sidebar, center content and right sidebar determined by flex in a horizontal flexbox container taking ratios like 1 5 1 , the problem is if i use position fixed, it goes outside the normal document flow and the flex layout gets mesed up – Deluna

@Deluna - I would use the .content box as the flexbox container. See is that works. – Consequent

Answer 2

Here is an alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/

body{
    padding-left:200px;
    margin:0;
}
div#sidebar{
   position:fixed;
   height:100%;
   width:200px; 
   top:0;
   left:0;
   background:grey; 
}
div#content{
    background:black;
    width:100%;
    height:1600px;
}

Daudet

This is completely useless when having too many objects on the sidebar. See your own code extended: jsfiddle.net/8mVQX/401 – Bubo

@SoldeplataSaketos Completely useless seems to be a bit of an overstatement, a simple 'overflow-y: auto' on the sidebar fixes the issue. – Hartshorn

Answer 3

Here is another alternative by using only two CSS lines

.sidebar { position: sticky; top: 0; }

and the credit goes to this post.

You can also experiment with the code over here.

Anxiety