Skip to main content
L
lindseyc1994
Participant
December 31, 2018
Question

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

  • December 31, 2018
  • 1 reply
  • 4254 views

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

This topic has been closed for replies.

1 reply

sinious
sinious
Legend
January 1, 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:

<div class="your-class-name">

   ...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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices