0

html,
body {
  margin: 0;
}

.container {
  width: 50%;
  margin: 0 auto;
  background: #eee;
}

.panel {
  width: calc(100% - 140px);
  background: lightblue;
  height: 100vh;
}

.sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 120px;
  height: 100vh;
  text-align: center;
  overflow-y: scroll;
  background: gold;
}
<div class='container'>
  <div class='panel'>
    <p>lorem</p>
    <p>ipsum</p>
    <p>lorem</p>
  </div>
  <div class='sidebar'>
    <p>info</p>
    <p>info</p>
    <p>info</p>
  </div>
</div>

Two problems:

  • why parent has a top margin?
  • why sidebar is outside of parent?

it's probably because of position:fixed but what is the way to make a sidebar non-movable on a page?

I need it to be fixed because it contains important info about long list items clicked on left side (panel).

On a large monitor, for example 1920px, the sidebar is far right, outside of body (which is 1360px max.)

I need to keep it fixed but tidy inside container.

Chase Ingebritson
  • 1,559
  • 1
  • 12
  • 25

1 Answers1

0

1.) the margin on the top is more than likely due to the default browser styles. Normally browsers will put a margin around the html and/or body tags. You can reset this by putting:

html, body {
    margin: 0;
}

into your css file.

2.) Please see this answer for your issue with the fixed sidebar going outside of your container as this question has already been asked and answered.

Matthew
  • 922
  • 1
  • 6
  • 21
  • Oh I just checked the inspector again. Your paragraph elements have a top and bottom margin on them. Remove the `margin-top` from your `p` elements and the margin should be gone. – Matthew Aug 27 '18 at 18:01
  • where did you find that my `

    ` has a `top-margin`. I can't see.

     –  Aug 27 '18 at 20:16
  • 1
    If you open Google Chrome and hit ctrl+shift+i that will open the developer tools. You can do this in all browsers although how you get there may be a little different. Once you have that open, click the inspect icon and then select the element you want to look at. That will show you the element and the CSS styles applied to that element. This is a key tool to use when developing so you can know what to fix when you have issues with your design layouts. You can also see any javascript errors in this menu. – Matthew Aug 27 '18 at 20:32