CSS - Need box to stick to the left side of the page

Report · Dec 31, 2018

I'm in Squarespace trying to create a sidebar using their plugin. PROBLEM - my sidebar (the reddish/brownish block on the left) is floating on the left side of the page. I want it to be attached to the left side of the page. What property or style do I need to use to get it to stick to the left side of the page?

This is how it looks now

Report · Jan 01, 2019

What you're looking for is keeping the HTML structure out of the site flow (usually) and then using the CSS position property, setting it to fixed. That will allow you to use the properties top/bottom/left/right and adjust how many pixels away from those edges you want your content. Finally, if it should be on top of other content, you can use the z-index property, setting it to a higher value than the content below it to assure it visually appears on top.

For example, to stick it 50px below the top and 0px from the left edge, you can do this:

HTML:

...content...

</div>

CSS:

.your-class-name {

position: fixed;

top: 50px;

left: 0;

z-index: 100;

}

The bar will now stick to the left side of the screen and will not scroll with the page.

Edit:

If you do want it to scroll with the page, simply change the CSS above from postiion: fixed; to position: absolute; .. And make sure your HTML is directly inside the container you want to position it with. For the browser window, just make sure it's at the <body> level.

Adobe Community

CSS - Need box to stick to the left side of the page