Question

Is there any suggestion how do you work with position:absolute with responsive design?

I have a design which is 1000px width, and left from that container div(1000px) I have image, positioned as position: absolute.

Problem is, when I decrease width of browser I get horizontal scroll.

What is the proper way with positioning absolute divs with responsive design?

Edit: This is an example I am talking about http://jsfiddle.net/FeAUr/ . For purpose of example I set container width to 100px, instead of 1000px.

Point is, that I get horizontal scroll bar when I decrease width of my browser because of that “absolute” element with picture. How can I do it in proper way, that I wont get horizontal scroll bar?

<div class="bggrey">

    <div class="absolute-left"><img src="http://placehold.it/200x200" /></div>
    <div class="row">content</div>

</div>

.bggrey{
    width: 100%;
 background: #999;   
    height:500px;
}

.row{
 width:100px;   
    height:500px;
    background: #fff;
    margin: auto;
}

.absolute-left{
    position:absolute;
    left:50%;
    margin-left:-300px;
    width:200px;
    height:100px;
}

Answer 1

I accomplished this with making another div for background and putting image as background-image. Using zurb fundation for responsive image helped too.