How to display images horizontally?

HTML & CSS
1

Hi,

I want to display 12 images horizontally in a single row using <div> & <span>. Each and every image will come with a span or div. I have tried to do the same by using the following code.

<style type=“text/css”>
picsFilmstripDiv { background-color:#ffffff;border:solid 1px #696969;margin-top:5px;padding:5px 5px 5px 5px;overflow:auto;width:99%;_width:100%; }
.picBorder { border:solid 1px #FFF;display:table-cell;width:96px;height:96px;text-align:center;vertical-align:middle; }
.picNormal { border:solid 1px #99C; display:table-cell;width:98px;height:98px;_width:100px;_height:100px;text-align:center;vertical-align:middle; }

</style>
<div id=“picsFilmstrip_inpGrp” class=“picsFilmstripDiv”>
<table cellpadding=“0” cellspacing=“0” border=“0” summary=“”>
<tr id=“picsFilmstrip_row_1”>
<td valign=“center”><span style=“width:100%; “>
<div style=“background-color:#CCF;border:1px solid red;”>Your Picture: 7 | 17 can be added</div>
<div style=“float:left;width:100px;”>
<div style=“padding:0px;margin-top:8px;margin-bottom:3px;color:#000000;font-family:Verdana;font-size:10pt;” id=“selImgNumber0”>1</div>
<div id=“filmstripPicOuterLyr_0” class=“picNormal”>
<div class=“picBorder”>
<div id=“selImgLyr0” style=“vertical-align:middle”><span style=“display:inline-block;height:100px”></span><img border=“0” alt=”” src=“http://i4.ebayimg.qa.ebay.com/03/i/000/77/36/8d15_0.JPG” align=“absmiddle”></div>
</div>
</div>
<div style=“background-color:#CCF;width:100px;height:18px;padding-top:1px;margin-top:2px;” id=“selImgTitle0”><span id=“MoveLeft” style=“padding-left:21px;padding-right:3px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveLt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span><span id=“MoveRight” style=“padding-right:8px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveRt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span><span id=“Trash” style=“padding-right:20px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveRt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span></div>
</div>
<div style=“margin-left:115px;width:100px;”>
<div style=“padding:0px;margin-top:8px;margin-bottom:3px;width:100px;color:#000000;font-family:Verdana;font-size:10pt;” id=“selImgNumber1”>2</div>
<div id=“filmstripPicOuterLyr_1” class=“picNormal”>
<div class=“picBorder”>
<div id=“selImgLyr1” style=“vertical-align:middle”><span style=“display:inline-block;height:100px”></span><img border=“0” alt=“” src=“http://i4.ebayimg.qa.ebay.com/03/i/000/77/36/8d15_0.JPG” align=“absmiddle”></div>
</div>
</div>
<div style=“background-color:#CCF;width:100px;height:18px;padding-top:1px;margin-top:2px;” id=“selImgTitle0”><span id=“MoveLeft” style=“padding-left:21px;padding-right:3px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveLt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span><span id=“MoveRight” style=“padding-right:8px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveRt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span><span id=“Trash” style=“padding-right:20px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveRt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span></div>
</div>
<div style=“margin-left:230px; position:relative;width:100px;”>
<div style=“padding:0px;margin-top:8px;margin-bottom:3px;width:100px;color:#000000;font-family:Verdana;font-size:10pt;” id=“selImgNumber1”>3</div>
<div id=“filmstripPicOuterLyr_1” class=“picNormal”>
<div class=“picBorder”>
<div id=“selImgLyr1” style=“vertical-align:middle”><span style=“display:inline-block;height:100px”></span><img border=“0” alt=“” src=“http://i4.ebayimg.qa.ebay.com/03/i/000/77/36/8d15_0.JPG” align=“absmiddle”></div>
</div>
</div>
<div style=“background-color:#CCF;width:100px;height:18px;padding-top:1px;margin-top:2px;” id=“selImgTitle0”><span id=“MoveLeft” style=“padding-left:21px;padding-right:3px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveLt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span><span id=“MoveRight” style=“padding-right:8px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveRt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span><span id=“Trash” style=“padding-right:20px; “><img border=“0” alt=”” src=“http://pics.qa.ebaystatic.com/aw/pics/icon/iconInactMoveRt_20x20.gif” width=“16px” height=“16px” id=“defImage”></span></div>
</div>

  &lt;/span&gt;&lt;/td&gt;

</tr>
</table>

but its coming fine only for the 2 images…if it goes more than 2 than the alignment is not looking good. can anyone help me?

2

I think there’s a little code-spaghetti there!

Why don’t you just put all your images next to one another in HTML:


<div id="myimages">
<img src="image1" />
<img src="image1" />
<img src="imageN" />
</div>

then apply (untested) CSS such as:


#myimages { white-space: nowrap; }
#myimages img {
display: block;
float: left;
margin: 20px;
}
3

You could also justify this as another use of lists.


#film_strip li {
  float: left
}
#film_strip li img {
  float: left;
  background: #EFEFEF;
  padding: 5px;
  margin: 5px;
  border: 1px solid #AAA;
}



<ul id="film_strip">
  <li><img src="image1" width="50" height="50" alt="" /></li>
  <li><img src="image2" width="50" height="50" alt="" /></li>
  <li><img src="image3" width="50" height="50" alt="" /></li>
  <li><img src="image4" width="50" height="50" alt="" /></li>
  <li><img src="image5" width="50" height="50" alt="" /></li>
  <li><img src="image6" width="50" height="50" alt="" /></li>
  <li><img src="image7" width="50" height="50" alt="" /></li>
  <li><img src="image8" width="50" height="50" alt="" /></li>
  <li><img src="image9" width="50" height="50" alt="" /></li>
  <li><img src="image10" width="50" height="50" alt="" /></li>
  <li><img src="image11" width="50" height="50" alt="" /></li>
  <li><img src="image12" width="50" height="50" alt="" /></li>
</ul>
4

Hi ,

I cannt use <li>. We have some limitations to use this tag. I should achieve the same using <div> and <span>. And each image should become under separate <div>. I have acheived the same using <table>. Thanks a lot…

5

I can hear all the CSS and accessibility evangelists weeping in unison!

Seriously, though, a table is not the right tag to use. You’ll end up with far more code than is necessary and it’ll be more difficult to maintain. If you can’t use a list, a single DIV with all the IMGs inside it should be much easier to manage.

6

I don’t understand how you can have a limitation of using a valid HTML tag in a HTML document…

7