I have a few images(3) which should be displayed in one line and whose combined width is MORE than the page width. But i anyway want them be overlapping, hence the page width doesn't matter. But for some reason only 2 images are coming in one line and third in the next. How do i sort this out.They work perfectly if i make \[code\].imageContainer\[/code\] as \[code\]position:abolute\[/code\] and give \[code\]left:--px\[/code\] values to each of the id. But that would be difficult to maintain and align. Also they align up properly if i reduce the width of each image, but i don't want to do that 
. Please Help.Here's the code:\[code\]<div class="allImagesContainer"><div class="imageContainer" id="firstImage"> <img src="http://stackoverflow.com/questions/15585876/images/android1.png"/> <div class="innerText"></div></div><div class="imageContainer" id="biggerImage" > <img src="http://stackoverflow.com/questions/15585876/images/android2.png"/> <div class="innerText"></div></div><div class="imageContainer" id="lastImage"> <img src="http://stackoverflow.com/questions/15585876/images/android3.png"/> <div class="innerText"></div></div></div>\[/code\]And here's the styling:\[code\].allImagesContainer {position: relative;top: 50px;width: 80%;height: 500px;margin-left: auto;margin-right: auto;display: table ;}.imageContainer{position: relative;display: inline-block;}#firstImage{z-index: 1;}#biggerImage{position: relative;left: -50px;z-index: 2;}#lastImage{position: relative;left: -40px;z-index: 1;}\[/code\]
. Please Help.Here's the code:\[code\]<div class="allImagesContainer"><div class="imageContainer" id="firstImage"> <img src="http://stackoverflow.com/questions/15585876/images/android1.png"/> <div class="innerText"></div></div><div class="imageContainer" id="biggerImage" > <img src="http://stackoverflow.com/questions/15585876/images/android2.png"/> <div class="innerText"></div></div><div class="imageContainer" id="lastImage"> <img src="http://stackoverflow.com/questions/15585876/images/android3.png"/> <div class="innerText"></div></div></div>\[/code\]And here's the styling:\[code\].allImagesContainer {position: relative;top: 50px;width: 80%;height: 500px;margin-left: auto;margin-right: auto;display: table ;}.imageContainer{position: relative;display: inline-block;}#firstImage{z-index: 1;}#biggerImage{position: relative;left: -50px;z-index: 2;}#lastImage{position: relative;left: -40px;z-index: 1;}\[/code\]