Whitespace added when browser is smaller than content - html

Question

I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)

Answer 1

After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.

Answer 2

As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .