Enfoloevell
New Member
I have the following layout : http://jsfiddle.net/7C2R8/The blue container is my page. I position my image with negative margins : \[code\].image-wrapper { float:right; margin-top:-250px; margin-right:-100px;}\[/code\]The image is where I want it to be and the whole thing works the way I want it to on a big screen.The problem comes when the viewport is smaller. For example, if the viewport is the size of the container (500px wide in my example) then a scroll bar appears on the x axis to see the image. This is what I don't want. I would like for my image to be truncated when not enough space is available. The container is the only thing that should scroll.
The image should be fully visible when the viewport is big enough.How do I achieve this?Thanks!