Left padding on container when content of the article goes past the fold

Question

I have a container which has my header, nav, sidebar and article inside. When the contents of the article go past the fold, there is either padding or margin being added to the left of the container. It's clear when you change between pages where the content goes past the fold, and pages where it doesn't, as the container jolts to the right.

HTML

<div id="container">

<header>
    Blog
</header>

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="newpost.html">New post</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>

<aside>
    <form id="newsletter">
        <h2 label for="newsemail">Newsletter signup</h2 label>
        <input type="email" name="newsemail" placeholder="Enter email..." required>
        <button type="submit" class=submitbutton>Submit</button>
    </form>
</aside>

<article>
    <section><h1>Post 1</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 2</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 3</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
</article>

CSS

header, footer, nav, article, aside{ display: block; }

#container{ border-radius: 20px; background-color:#97C02F; padding:10px 50px 30px 50px; margin:0px auto; width:880px; overflow:auto; }

aside{ float:left; width:150px; padding-right:15px; color:red; margin-top:15px; }

article{ float:left; width:660px; margin-left:20px; }

section{ font-family: 'Droid Sans', sans-serif; color:#FFFFFF; font-size:15px; font-weight:normal; }

I haven't inserted all of my code, but think I've put the necessary bits in.

Havent looked at the HTML and CSS, but isnt your "problem" simply caused by the browser adding a scrollbar on the right because the page is larger as the screen? This decreases the width of the page by the width of the scrollbar — Benjamin Udink ten Cate
Wow, I feel stupid. Had a few people look at this but no one noticed the obvious. Thanks. Is there a way around this, because I don't like how the page jumps to the right? — paulyay
I think Ben is right about the vertical scrollbar being added. You can use html { overflow-y:scroll } to force a scrollbar, even if the content doesn't need scrolled, so this jumping doesn't occur. — Damon Bauer
The problem is the margin: auto because this centers it and thus makes your page jump. id advice you to just live with it, since the alternative is aligning your content on the left instead of center, which is way more ugly — Benjamin Udink ten Cate
I've gone with motoxer4533's solution. Thanks for pointing out the obvious to me and thanks for the solution! — paulyay

Damon Bauer Damon Bauer · Accepted Answer · 2011-10-27T13:23:15

You can use html { overflow-y:scroll } to force a scrollbar, even if the content doesn't need scrolled, so this jumping doesn't occur.

Left padding on container when content of the article goes past the fold

2 Answers