Negative margin-left works fine, negative margin-right creates scrollbar

Question

I have the following fiddle, notice that if you make the width of the output smaller the image is covered up and no scroll bar appears - perfect.

If I attempt the same effect on the right, I get a horizontal scrollbar - not perfect.

I know about overflow: hidden on the article but that would ruin the look I'm going for. I also tried with relative positioning but that didn't wrap the text (although not to say it's impossible to make the text wrap).

Anyone know how I can get what I want?

<article>
    <h1>Lorem ipsum dolor</h1>

    <img src="http://lorempixel.com/500/300" class="right" />

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet diam in neque venenatis semper et et dui. Nam risus ante, condimentum id neque ac, faucibus molestie purus. Pellentesque viverra ultrices lacus, sed vulputate diam lobortis fermentum.</p>
    <p>Sed tincidunt tortor in lectus imperdiet bibendum. Nullam pellentesque commodo lacus, eget consequat erat convallis ut. Donec scelerisque urna urna, at aliquam nulla sagittis eu. Proin sit amet sagittis est. Phasellus tempor orci sem, id facilisis nibh tincidunt non.</p>

    <h2>Sit amet</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet diam in neque venenatis semper et et dui. Nam risus ante, condimentum id neque ac, faucibus molestie purus. Pellentesque viverra ultrices lacus, sed vulputate diam lobortis fermentum.</p>    
    <p>Sed tincidunt tortor in lectus imperdiet bibendum. Nullam pellentesque commodo lacus, eget consequat erat convallis ut. Donec scelerisque urna urna, at aliquam nulla sagittis eu. Proin sit amet sagittis est. Phasellus tempor orci sem, id facilisis nibh tincidunt non.</p>
</article>

CSS

article {
    margin: 0 auto;
    max-width: 500px;
}

img.left {
    margin: 0 20px 20px -300px;
    float: left;
}

img.right {
    margin: 0 -300px 20px 20px;
    float: right;
}

Answer 1

The reason for the behavior you're observing is because horizontal overflow only takes place from the opposite edge from where the content starts. The direction of content is LTR in most languages, so starting from the left, any overflowing content will flow out of the right side. In the case of negative margins, pulling an element out of the left edge simply clips that part of the element entirely, while pulling it out of the right edge actually expands its container's effective content area, causing overflow.

To get what you want, apply hidden overflow to the body instead of the article so the content overflows the article without also overflowing the body, resulting in the horizontal scrollbar being created. Be sure to use overflow-x instead of overflow so you don't lose the vertical scrollbar for your content:

body {
    overflow-x: hidden;
}

If you need to prevent scrolling entirely as opposed to just hiding the scrollbar, you'll need to apply overflow to both html, body, as well as getting rid of the default body margins, as shown here:

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
}