Position Absolute Side by Side CSS

Question

I am facing issue regarding placing balloons like this image:

    <div class="red_frame">
    <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
    <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
    </div>
.red_frame {
float: left;
width: 143px;
height: 346px;
margin: 0 2px 0 0;
position: relative;
}

.r_over
{position: relative;
right: 29px;}

Fiddle link http://jsfiddle.net/fddkdvn4/

Answer 1

You almost near to solve it by yourself.

Playing with position is a good approach, but for this solution, you just simply need margin-left: -10px .

 .red_frame { float: left; width: 143px; height: 346px; margin: 0 2px 0 0; position: relative; } .r_over { position: relative; right: 29px; margin-left: -10px; } 

 <div class="red_frame"> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> </div> 

Answer 2

use

DEMO

CSS

.red_frame {
float: left;
width: 143px;
height: 346px;
margin: 0 2px 0 0;
position: absolute;
}

.r_over
{margin-left:-10px;
}

Answer 3

Add margin-left: -10px; in .r_over{} but delete postion:relative; and right:29px;

Answer 4

Negative margin would be the simplest way to do this. But, make sure you use the :not(:first-child) selector, otherwise the first image will also get the negative margin.

Snippet:

 .red_frame { width: 143px; height: 346px; margin: 8px; } .r_over:not(:first-child) { margin-left: -10px; } 

 <div class="red_frame"> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" /> </div>