Absolute positioning inside relative - css

Question

I'm working with 100% width relative positioning, but need an absolute positioned child div or span to hold a jquery image slider.
Layout
------ width 100%-------
| img1 | slider | img2 |
Currently the slider span isn't being positioned inline like the other objects and overlapping
What I have so far:
Fiddle
HTML
<div class="pic_container">
<img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg">
<span class="viewer">
<img src="http://images.printsplace.co.uk/Content/Images/Products/46576/43569/Image_of_M101_1.jpg" alt="" class="active" />
<img src="http://i.bosity.com/clothes_cache/261/12002348/3480000011312473207_12002348_1_image.jpg" alt="" />
<img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-6.jpg" alt="" />
</span>
<img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg">
</div>
</div>
CSS
/*slideshow*/
.viewer {
font-size:0;
display:inline;
}
.viewer IMG {
position:absolute;
z-index:8;
width:50%;
vertical-align:top;
}
.viewer IMG.active {
z-index:10;
}
.viewer IMG.last-active {
z-index:9;
}
/*pics*/
.pic_container{
font-size:0;
display:inline;
}
.pic_container img {
width:25%;
vertical-align:top;
}

Answer 1

I've added a wrapper to the viewer and removed the extra spacing between your outer images and the slideshow viewer using the html comment tags (this is better than setting font-size:0). I've adjusted the JS, so that the transition works. I've also cleaned up and reduced the amount of CSS needed.
HTML
<div class="picture-container">
<img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg" /><!--
--><div class="viewer">
<img src="http://images.printsplace.co.uk/Content/Images/Products/46576/43569/Image_of_M101_1.jpg" class="active" />
<img src="http://i.bosity.com/clothes_cache/261/12002348/3480000011312473207_12002348_1_image.jpg" />
<img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-6.jpg" />
</div><!--
--><img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg" />
</div>
CSS:
* {margin:0;padding:0}
.picture-container > img {display:inline-block;width:25%;}
.viewer {display:inline-block;position:relative;width:50%;vertical-align:top;}
.viewer img {position:absolute;width:100%;}
JS
function slideSwitch() {
var transitionDuration = 1000;
var active = $('.viewer img.active');
var next = $('.viewer img:first').insertAfter(active);
active.removeClass('active').fadeOut(transitionDuration);
next.addClass('active').hide().fadeIn(transitionDuration);
}
$(document).ready(function(){
$('.viewer img.active').insertAfter('.viewer img:last');
setInterval("slideSwitch()", 4000);
});
You can see it here: http://jsfiddle.net/Ry7Su/1/
Hope this helps.

Answer 2

The following changes will solve your problem.
This is based on your code. You can tweak it to make it shorter.
HTML part:
<div class="pic_container">
<div class="leftDiv">
<img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg">
</div><!--
--><div class="viewerWrapper"><div class="viewer">
<img src="http://images.printsplace.co.uk/Content/Images/Products/46576/43569/Image_of_M101_1.jpg" alt="" class="active" />
<img src="http://i.bosity.com/clothes_cache/261/12002348/3480000011312473207_12002348_1_image.jpg" alt="" />
<img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-6.jpg" alt="" />
</div></div><!--
--><div class="rightDiv">
<img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg">
</div>
</div>
CSS Part:
.pic_container {
display: block;
width: 100%;
position:relative;
}
.leftDiv {
display:inline-block;
width: 25%;
position:relative;
}
.rightDiv {
display:inline-block;
width: 25%;
position:relative;
}
.viewerWrapper {
display:inline-block;
width: 50%;
position:relative;
vertical-align: top;
}
.viewer {
width:100%;
}
.leftDiv IMG, .rightDiv IMG, .viewer IMG {
max-width: 100%;
}
.viewer IMG {
z-index:8;
position: absolute;
}
.viewer IMG.active {
z-index:10;
}
.viewer IMG.last-active {
z-index:9;
}
See it here: http://jsfiddle.net/FTEan/

Answer 3

try to give pic_container position: relative; and try to give viewer display: inline-block; this might work. pic_container could may also be display: inline-block;