Unable to precisely position fixed-position overlay on a grid item - html

Question

I am trying to create a grid with 2 columns:
1) a narrow fixed-position sidebar on the left
2) A wide column for the main content on the right.
According to this post, there is a problem with fixed-position grid items. One response was to:
wrap your contents in a div and set the div to have position: fixed.
The author successfuly presented a demonstration of this technique. Here, the fixed sidebar was at the right-side of the screen.
Since I need my fixed sidebar on the left, I have adapted the technique, as shown here. My adaptation was basically to provide a width for the <div> overlaid in the sidebar:
aside div {
width: 200px;
margin: 0;
padding: 0;
border: 1px solid blue;
/* padding: 0 15px 0 5px; */
position: fixed;
}
The adaptation works in principle, but for some reason the overlay is offset to the right by a small margin, as indicated by the blue border (provided for debugging purposes). As a result, the text in the sidebar overflows and the text-wrap takes place outside the sidebar.
1) Why does this happen?
2) Is it possible to precisely overlay the fixed-position div on the grid's sidebar? I have tried margins and padding for certain elements as shown in the codepen, but they don't help. I have also tried reducing the width of the overlay, as shown here. This works, but is arbitrary.

Answer 1

You can just add width:100% to your .grid > * {} part of the CSS. This will just override the width of all children of .grid to fill up the whole width of the grid-element so that the child elements don't overflow out of the grid.
Here is what your final code will become:
body {
margin: 0;
}
.grid {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas: "sb mn";
grid-column-gap: 10px;
}
.grid>* {
margin: 0;
padding: 0;
width: 100%;/* This is the part I added */
}
.sidebar {
grid-area: sb;
border: 1px solid green;
background-color: red;
}
aside div {
width: 200px;
margin: 0;
padding: 0;
border: 1px solid blue;
/* padding: 0 15px 0 5px; */
position: fixed;
}
.main {
grid-area: mn;
}
<div class="grid">
<aside class="sidebar">
<div>
<h4>laboris nisi</h4>
<p>
Cum sociis natoque penatibus bibendum enim facilisis gravida neque convallis a cras. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient.
</p>
<p>
Id neque aliquam vestibulum sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer.
</p>
<p>
Vestibulum rhoncus est tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Feugiat nibh sed pulvinar proin gravida.
</p>
</div>
</aside>
<div class="main">
<h1>Cras semper auctor neque vitae</h1>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
neque laoreet suspendisse interdum consectetur.
</p>
<p>
Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
</p>
<p>
Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
</p>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
neque laoreet suspendisse interdum consectetur.
</p>
<p>
Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
</p>
<p>
Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
</p>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
neque laoreet suspendisse interdum consectetur.
</p>
<p>
Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
</p>
<p>
Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
</p>
</div>
<!-- main -->
</div>
<!-- grid -->
But if you just needed a fixed sidebar, you could just add height:100vh; overflow-Y: scroll to .main or as #ndvo has suggested using position: sticky, this is a much better solution.
Then your code should become:
body {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas: "sb mn";
grid-column-gap: 2vw;/* using the unit 'vw'(2% of viewport-width) will make the gap responsive */
height: 100vh; /* 100% of viewport-height. (Fill up the whole screen height) */
}
.sidebar {
grid-area: sb;
padding: 0 5px;
/* The part below is just appearance */
box-shadow: inset 2px 2px red, inset -2px -2px red;
background: yellow;
}
.sidebarContent {
position: sticky;
top: 0;
/* The part below is just appearance */
height:60vh;
background: red;
text-align: center;
color: yellow
}
.main {
grid-area: mn;
padding: 0 5px;
/* The part below is just appearance */
box-shadow: inset 2px 2px red, inset -2px -2px red;
background: green;
}
.mainContent {
/* The part below is just appearance */
background: red;
text-align: center;
color: yellow
}
<div class="grid">
<aside class="sidebar">
<div class="sidebarContent">
SideBar Content
</div>
</aside>
<div class="main">
<div class="mainContent">
Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>Main
Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>
</div>
</div>
</div>
Tangent:
I prefer using box-shadows over border as borders takeup additional space thereby ruining the grid percentages by a bit (Maybe I'm being OCD 😜).
I would also like to recommend GridGarden, a game with just 28 very easy levels ( At the time of writing ). Just complete it once. It helped me; it might help others too.

Answer 2

Problems with Fixed Positioning
The first grid item has a width of 200px (using grid-template-columns: 200px 1fr in the grid definition) and at the same time the aside div inside the grid item is being set width: 200px along with padding (and left: 0 not added along with position: fixed.
Suggestion
But I would suggest to omit fixed positioning for the aside div and add grid-template-rows: 100vh to the grid container. This will restrict your grid to the viewport and now you can add overflow-y: auto to the two grid items as desired. This will give you the same effect of a fixed sidebar - see demo below:
body {
margin: 0;
}
.grid {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100vh; /* ADDED */
grid-template-areas: "sb mn";
grid-column-gap: 10px;
}
.grid>* {
margin: 0;
padding: 0;
}
.sidebar {
grid-area: sb;
border: 1px solid green;
/*padding: 0 5px;*/
background-color: red;
overflow: hidden; /* ADDED */
}
aside div {
/* width: 200px; */
margin: 0;
padding: 0 5px; /* CHANGED */
border: 1px solid blue;
/* padding: 0 15px 0 5px; */
/* position: fixed; */
}
.main {
grid-area: mn;
overflow-y: auto; /* ADDED */
}
<div class="grid">
<aside class="sidebar">
<div>
<h4>laboris nisi</h4>
<p>
Cum sociis natoque penatibus bibendum enim facilisis gravida neque convallis a cras. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient.
</p>
<p>
Id neque aliquam vestibulum sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer.
</p>
<p>
Vestibulum rhoncus est tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Feugiat nibh sed pulvinar proin gravida.
</p>
</div>
</aside>
<div class="main">
<h1>Cras semper auctor neque vitae</h1>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
neque laoreet suspendisse interdum consectetur.
</p>
<p>
Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
</p>
<p>
Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
</p>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
neque laoreet suspendisse interdum consectetur.
</p>
<p>
Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
</p>
<p>
Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
</p>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
neque laoreet suspendisse interdum consectetur.
</p>
<p>
Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
</p>
<p>
Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
</p>
</div>
<!-- main -->
</div>
<!-- grid -->