How can i make this image out of viewport without trigering an overflow scrollbar?

Question

I have this situation where i am unable to put an image on the right of a page, witch will bleed out if view port area is smaller than necessary space available.

HTML

<div class="relative-container">
<div class="content1">
    <p>Lorem ipsum dolor sit amet</p>
    <img alt="" src="http://placehold.it/64x64" />
    <p>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos <strong>the right image is supposed to come under this paragraph, just a little</strong>.</p>
    <img alt="" src="http://placehold.it/64x64" />
</div>
<div class="content-outofport">
    <img alt="" src="http://placehold.it/128x64/f00000/000/&text=out%20of%20port" />
</div>
<div class="content2">
    <img alt="" src="http://placehold.it/64x64" />
    <p><strong>This paragraph won't be affected by imge position</strong>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos mauris porta semper, habitant at mi vulputate. Eget parturient. Suspendisse donec ante est nullam magna, nisl leo vitae vitae. Sequi nec lacinia dui magna, accumsan justo augue, sed nunc penatibus commodo. Porttitor vestibulum nibh, donec at nunc eros vitae mollis.</p>
    <img alt="" src="http://placehold.it/64x64" />
</div>

CSS

.relative-container {
    position:relative
}
.content1 {
    border:2px solid #fee;
    z-indez:1
}
.content2 {
    border:2px solid #eef;
}
.content-outofport {
    background-color:#fcc;
    border:2px solid #efe;
    height:64px;
    position:relative;
    right:0;
    z-indez:0;
    overflow:visible;
    margin-right:111px;
    right:0;
    width:100%;
}
.content-outofport img {
    position:absolute;
    right:-110px;
    top:-111px;
}

jsFiddle : http://jsfiddle.net/zUaAq/1/

From SO, those didn't help:

• Positioning an element that can overflow outside the viewport without triggering a scrollbar?
• How to push an element outside the screen without the browser just expanding the viewport?
• How to position an element just off the top of the browser viewport using only css?

At first, i want to avoid javascript

On the jsFiddle example, the redish <div> is not supposed to be visible.

On the actual development context, only the <div class="content-outofport"> is manageable (has html writing access, but i wont be able to move/format other elements from html markups except applying .css on them.)

Head itch?

Answer 1

http://jsfiddle.net/zUaAq/4

.relative-container {
    overflow: hidden;
}

If the idea was to keep the red image in the page when possible, you might do this:

http://jsfiddle.net/zUaAq/6/

.content-outofport img {
    left: 400px;
}

Of course, you'll want to set the left position depending on the image and container widths.

Answer 2

User isherwood directed me to a proper answer.

HTML is the same

CSS

.relative-container {
    position:relative;
    /* THIS WAS IT and ONLY IT */
    overflow: hidden;
}
.content1 {
    border:2px solid #fee;
    z-index:22;
    position:relative;
}
.content2 {
    border:2px solid #eef;
    position:relative;
}
.content-outofport {
    background-color:#fcc;
    border:2px solid #efe;
    height:64px;
    position:relative;
    right:0;
    z-index:0;
    overflow:visible;
    margin-right:111px;
    right:0;
    width:100%;
    min-width:777px;
    max-width:999px;
    right:0;
}
.content-outofport img {
    position:absolute;
    right:0px;
    top:-141px;
}

As shown on this jsFiddle