Page Scrolling Even When There's No Content

[Historical Forums User]

I’m not sure if this question is too specific to Squarespace or not. I wanted my sidebar to have a different color than the “main” portion of the page so I added this code to my custom CSS box:
body.sidebar-position-left #headerWrapper {
position: absolute;
top: 0px;
left: 25px;
width: 200px;
background: #1a1a1a;
padding: 10px;
height: 100%;
}

body.sidebar-position-left #header {
padding-top: 15px;
padding-right: 10px;
}

It does what I want to, however on some pages it makes the browser think there is more content below which causes the scroll bars to come out. For example if you go to this page:
http://jeff-singer.squarespace.com/contact-1-1/
(password: testing)

You can see the page will scroll even though there is no content to scroll.

I’ve determined it’s the height: 100% that is causing it. If I change it to 90% it will stop the scrolling, however the sidebar doesn’t go all the way down. Anything 91% or higher the scrolling comes back.

Any ideas?

Thanks!!!!

[Historical Forums User]

I may want to marry you! I was convinced in my head that this one issue was not going to be fixable. So far every issue I’ve brought here has been fixed… glad I found this place!

Thanks!

[Historical Forums User]

On a similar note, I used a code block to place an image where I wanted it since the page builder wasn’t working how I wanted… However, the code I used is causing horizontal scrolling.

Here is the page: http://jeff-singer.squarespace.com/contact/

And here is the code (which admittedly was just me guessing how to get the image in the right place and playing until I got it there… so there may be better ways to do it):

<div id="pic">
<div style='position:relative;
top:-215px;
right:-275px;
'>
<img src="//jeffsingerphotography.com/files/meandchloe.jpg" height="200" width="200" />
</div>

Thanks again!

[Historical Forums User]

Let me see if this makes anything clearer… I actually changed all the code to be in one block. Basically the custom code section starts with my name since I needed that to be a custom font.

Here is the entire section of code for the contact info and image (again, all in the same block):

<div id="namelogosm">
JEFF<br>
SINGER<br>
</div>

<div id="infologo">
SAN FRANCISCO<br>
LOS ANGELES<br>
NEW YORK CITY<br>
+1 111 111 1111<br>
email -[at]- mydomain.COM<br><br>

STOCK REPRESENTATION:<br>
<div id="stocklogo">
<a href="http://www.gallerystock.com/C.aspx?VP3=SearchResult_VPage&VBID=279RI30KMPG2" target="_blank" >gallery stock<font color="red">.</font></a>
</div>

<div id="pic">
  <div style='position:relative;
top:-215px;
right:-275px;
 '>
<img src="//jeffsingerphotography.com/files/meandchloe.jpg" height="200" width="200" />
</div>

[Historical Forums User]

It placed the picture after all the text:
http://jeff-singer.squarespace.com/contact/

[Thoughtful Geek]

What is the solution, please ?

[Beverleyh]

What is the problem you’re having specifically?

You might want to start a new thread where you can;

• clarify the question you’re asking
• clearly describe the problem vs what you expect to happen
• show the problem code (via CodePen)
• show the code you’ve tried to fix the problem yourself (via CodePen)

[Author]

Posts