Question

Im trying to float an element right outside of the main page content and want to avoid the horizontal scroll bar from cutting it off

Example
http://www.warface.co.uk/clients/warface.co.uk/test

I’ve noticed its been achieved in the footer here, but can’t figure it out how
http://www.webdesignerdepot.com/

HTML

<div class="wrapper">
    wrapper

<div class="imageright">
    </div><!-- imageright END -->

</div><!-- wrapper END -->

CSS

.wrapper {
    background: yellow;
    margin:0 auto;
    max-width: 1140px;
    height:500px;
    }

.imageright {
    background: aqua;
    width:520px;
    height:285px;
    display:block;
    position: absolute;
    float:right;
    right:-100px;
    }

Answer 1

The position: absolute; and the right:-100px; is pushing your element past the right edge of the viewport. Floating does not affect absolutely positioned elements.

If you want the element to be 100px away from the edge, make that a positive 100px. Or, if you want it right up against the edge, make it 0. If you truly want to float it, remove the absolute positioning.

Hopefully I understood the question, and I hope this helps!

Edit: I re-read the question and think an even better solution would be to add position: relative; to the wrapper. Right now, your absolutely position element is positioned relative to the viewport. If you give wrapper relative positioning, it will cause imageright to be positioned relative to wrapper.