Float content outside of website width

Question

I have a website which is 960px wide and want to put a picture outside of that on the right side.

Vimeo have done it on there homepage: http://vimeo.com you can see a drawing of an origami bird that sticks outside the website width without causing the screen to get horizontal scrollbars

How do they do this?!

origami bird Floating outside of Vimeos layout

Answer 1

New answer:

After some further inquiry, it seems that a critical aspect was that the box/image would not cause horizontal scroll-bars, while the content would. This was an interesting trick applied by vimeo, and was quite sneaky.

It has to do with a combination of min-width on body, and overflow-x: hidden on a non-immediate parent of the box/image. When combined with position: absolute, and a negative right, this achieves the desired result.

HTML:

<div id="wrap">
    <div id="width_wrap">
        <div class="crane"></div>
    </div>
</div>​

CSS:

body
{
    min-width: 960px;
}

#wrap
{
    overflow-x: hidden;
}

#width_wrap {
    position: relative;
    width: 960px;
    height: 400px;
}

.crane
{
    position: absolute;
    width: 200px;
    height: 200px;
    right: -40px;
}

Here is a minimal Fiddle, with outlines such that you can see what's going on: http://jsfiddle.net/rUj8s/2/ ​

Original answer:

The position: absolute answers will most likely work, but will also take the image/div out of the normal flow of the document. This might not be what you want.

What you probably want is a negative margin-right:

.your_picture {
    margin-right: -30px;
}

Or, perhaps position: relative, and a negative right

.your_picture {
    position: relative;
    right: -30px;
}

Or, lastly, position: relative, and a positive left

.your_picture {
    position: relative;
    left: 30px;
}

This is why negative margins and relative positioning exist. To move things relative to where they would normally lie.

Answer 2

#parentDiv{
  position: relative;
}

#your_picture {
  position:absolute;
  right:-30px; /*change it to a number that you like */
  top: 30px; /*change it to a number that you like */
}

html markup would go like:

<div id="parentDiv">
   <div id="your_picture"></div>
</div>

Answer 3

.your_picture {
  position:absolute;
   /* this needs to be negative to have the image sticking outside of the width */
  right:-30px;
}