white-space:nowrap;
is what you're looking for, placed in allImagesContainer
See a DEMO
Question
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 .imageContainer
as position:abolute
and give left:--px
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.
UPDATE
white-space:nowrap;
placed in allImagesContainer has solved this problem, but only in chrome. The problem persists in FF and IE.
Here's the code:
<div class="allImagesContainer">
<div class="imageContainer" id="firstImage">
<img src="images/android1.png"/>
<div class="innerText"></div>
</div>
<div class="imageContainer" id="biggerImage" >
<img src="images/android2.png"/>
<div class="innerText"></div>
</div>
<div class="imageContainer" id="lastImage">
<img src="images/android3.png"/>
<div class="innerText"></div>
</div>
</div>
And here's the styling:
.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;
}
Solution
white-space:nowrap;
is what you're looking for, placed in allImagesContainer
See a DEMO
OTHER TIPS
If you don't want line breaks, you can use this css on allImagesContainer
.allImagesContainer
{
white-space:nowrap;
}
Your can remove the position: absolute and relative on all the elements but keep the display:inline-block