CODEWITHSUNDEEP
cssoverflowcss-float
Rob
Rob

Reputation: 1495

Floating elements right avoiding scrollbars

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;
    }

Upvotes: 1

Views: 4827

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78520

you can apply overflow:hidden; to the body, which is how you get what you're after, but it's highly inadvisable. Another way to take the div "out of flow" is to make it position: fixed; but that will mean it will be visible as you scroll down.

Upvotes: 0

mwcz
mwcz

Reputation: 9301

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.

Upvotes: 1

Related Questions