force images in same div to overlap - html

Question

<div style='width:10px'>
<a style="z-index : 1;cursor: pointer; text-decoration: underline; padding: 0px 3px 0px 0px; float: left;">
<img src='myimage.png' />
</a>
<a style="z-index : 1;margin-left: 4px; padding: 0px 3px 0px 0px; float: left;" >
<img src='myimage2.png' />
</a>
</div>
http://jsfiddle.net/n5q06r59/
With this code, the two images are displayed below each other. If I increase the width of the main div, the images are correctly displayed beside each other.
How do I force the elements to be always displayed beside each other, getting rather overlapped than drawn below in case of limited space?

Answer 1

You can use display table/table-cell to display beside. like:
div{
display:table;
}
a{
display:table-cell;
}
And remove float:left from anchor tag.
Check Fiddle Here.

Answer 2

If I understand you correctly, you want the images to display next to each other and when there are more images, you want them to overlap horizontally to fit in the given space.
Use javascript to accomplish what you want.
The overall logic would be,
Get the maximum width of the div
Divide the width by number of images you have (if all the images have same width), say that value is imgPosVal.
Place the images in such a way that you increment imgPosVal for each image on iteration.
To make this work successful, you have to position images as absolute;
Hope this helps. Let me know if you don't get it.
Sample Code: (You may have to tweak little bit according to your requirement)
var allImagesWidth = 100;
placeImages(["image1.png", "image2.png", "image3.png"]);
function placeImages(imageList) {
var parentDiv = $("#div");
var parentDivWidth = parentDiv.width(); //Say this is 200.
var imgPosVal = parentDivWidth/imageList.length; //66.6
for(var i=0; i<imageList.length; i++) {
var imgObj = $("<img src=\""+imageList[i]+"\" >");
parentDiv.append(imgObj);
imgObj.css({"position":"absolute", "left": (imgPosVal*i) + "px"});
}
}

Answer 3

Solution using Flexbox
.main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
a {
width: calc(100% - 4px);
margin: 0px 2px;
}
img {
width: 100%;
}
<div class="main">
<a><img src='http://lorempixel.com/400/200/sports/1/' /></a>
<a><img src='http://lorempixel.com/400/200/sports/2/' /></a>
<a><img src='http://lorempixel.com/400/200/sports/3/' /></a>
</div>
Jsfiddle Demo
Flex Guide

Answer 4

You can use postion: absolute attribute along with z-index:199 to keep top of other. The maximum value of z-index represent top position.
<a style="position:absolute;z-index : 0;cursor: pointer; text-decoration: underline; padding: 0px 3px 0px 0px; float: left;">
<img src='myimage.png' /> </a>
<a style="position:absolute;z-index : 1;margin-left: 4px; padding: 0px 3px 0px 0px; float: left;" >
<img src='myimage2.png' /> </a>