HTML Layout : Continuous images

Question

I have a series of images, which I want to make them showing in a row, i.e.

[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]

I want the overflow part will be hidden.

My current HTML is as follow:

<div id="gallery">
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
</div>

and this is the CSS:

#gallery {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
#gallery .gallery_img {
  width: auto;
  height: 200px;
}

Here is the jsFiddle. I would like to show half image in the edge of the screen, like this:

However, I can only manage to show full images only. How should I modify the HTML / CSS codes ?

Answer 1

Just use overwidth in percentage, and a mask div:

DEMO

#gallery {  
  width: 200%; /* this is the trick */
}
#gallery img {   /* and no need to add class="gallery_img" to IMGs anymore */
  height: 200px;
}

#wrapper {  
  height: 200px;
  overflow: hidden;
}



<div id="wrapper">
  <div id="gallery">
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />    
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />    
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
  </div>
</div>

---

EDIT

I'll add the simplest solution too (posted by @RupaliShinde), because it shows the correct use of the white-space attribute, and appearently it is hard to reproduce (reading the comments):

#gallery {  
  width: 100%; 
  overflow: hidden;  
  white-space: nowrap; /* this is the trick */
}
#gallery img {  
  height: 200px;
}

DEMO