How to implement fixed sidebar correctly?

Question

I'm trying to accomplish this design: example 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!

"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? — Soldeplata Saketos, Aug 16 '17 at 08:10

score 37 · Accepted Answer · edited Mar 20 '23 at 15:15

37

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/

edited Mar 20 '23 at 15:15

Edric

24,639
13
81
91

answered Mar 23 '13 at 19:05

Daniel

4,816
3
27
31

1

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. – Jakemmarsh Mar 23 '13 at 19:14
@Zach - i recreated the fiddle, but it is/was the same as code above. – Daniel Jul 31 '14 at 18:57
what if we want a fixed side bar with flexible width?? – sedflix Jun 09 '16 at 10:08
@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. – Daniel Jun 09 '16 at 15:31
What are the main reason `margin-left=200px` is used instead of just `left=200px`. – Tomas Jansson Jul 08 '16 at 13:20
1

@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. – Daniel Jul 08 '16 at 22:56
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 – PirateApp Jan 05 '18 at 12:51
@PirateApp - I would use the `.content` box as the flexbox container. See is that works. – Daniel Jan 05 '18 at 14:53

score 21 · Answer 2 · answered Mar 24 '13 at 01:02

21

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;
}

answered Mar 24 '13 at 01:02

Evan Mosseri

374
2
9

1

This is completely useless when having too many objects on the sidebar. See your own code extended: http://jsfiddle.net/8mVQX/401/ – Soldeplata Saketos Aug 16 '17 at 08:08
5

@SoldeplataSaketos Completely useless seems to be a bit of an overstatement, a simple 'overflow-y: auto' on the sidebar fixes the issue. – seBaka28 Mar 01 '18 at 15:58

score 9 · Answer 3 · answered Apr 04 '19 at 05:50

9

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.

answered Apr 04 '19 at 05:50

How to implement fixed sidebar correctly?

3 Answers3

Linked