title: How to get all images(overlapping allowed) in one line using css?
body: <p>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.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>
  <code>white-space:nowrap;</code> placed in allImagesContainer has solved this problem, but only in chrome. The problem persists in FF and IE.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div class="allImagesContainer"&gt;
  &lt;div class="imageContainer" id="firstImage"&gt;
      &lt;img  src="images/android1.png"/&gt;
      &lt;div class="innerText"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="imageContainer" id="biggerImage" &gt;
      &lt;img src="images/android2.png"/&gt;
      &lt;div class="innerText"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="imageContainer" id="lastImage"&gt;
      &lt;img src="images/android3.png"/&gt;
      &lt;div class="innerText"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the styling:</p>
  
  <pre><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></pre>