CODEWITHSUNDEEP
htmlcssfold
paulyay
paulyay

Reputation: 67

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

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.

Upvotes: 0

Views: 689

Answers (2)

Abner Stan.
Abner Stan.

Reputation: 121

HTML syntax that can be used in your CSS class to handle any exceeding in your container or div; etc.

This code give you an access to a scrollbar when it is necessary.

.of{overflow:auto}

Upvotes: 0

Damon Bauer
Damon Bauer

Reputation: 2726

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.

Upvotes: 2

Related Questions