html - Photo album with a horizontal scrollbar -

html - Photo album with a horizontal scrollbar -

could please explain me why 2nd, 3rd , 4th images in jsfiddle smaller , smaller in size?

http://jsfiddle.net/fdhl6/

here html jsfiddle.

<div id="album"> <table border="1"> <tr> <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td> <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td> <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td> <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td> <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td> </tr> <tr> <td>caption 1</td> <td>caption 2</td> <td>caption 3</td> <td>caption 4</td> <td>caption 5</td> </tr> </table> </div>

here css.

#album { overflow: auto; } #album td { width: 40%; } #album img { width: 100%; }

i trying create photo album horizontal scrollbar in #album div. want each image 40% of width of page. now, width, 2 , half image fit in page. want scrollbar appear remaining pictures in #album div. #album div should not exceed width of page.

don't utilize tables this. nowadays own problems.

http://jsfiddle.net/michaelburtonray/fdhl6/2/

html

<div id="album"> <ul class="stage"> <li class="image-wrapper"> <img src="http://i.imgur.com/dj7aqdo.jpg"/> <span>caption 1</span> <li class="image-wrapper"> <img src="http://i.imgur.com/dj7aqdo.jpg"/> <span>caption 2</span> <li class="image-wrapper"> <img src="http://i.imgur.com/dj7aqdo.jpg"/> <span>caption 3</span> <li class="image-wrapper"> <img src="http://i.imgur.com/dj7aqdo.jpg"/> <span>caption 4</span> <li class="image-wrapper"> <img src="http://i.imgur.com/dj7aqdo.jpg"/> <span>caption 5</span> </ul> </div>

css

#album { overflow: auto; } ul.stage { padding-left: 0; white-space: nowrap; width: 200%; } li.image-wrapper { display: inline-block; width: 20%; } img { display: block; width: 100%; } span { display: block; }

html css