How to have an array of images side by side using css/html -

I am using CSS / html and trying to get the "array" similar to the same images. It:

In the CSS file:

  #header_index {background: #FFFFFF url ('image1.jpg') Repeated x 10px 10px; Padding: 20px; Height: 240px; }  

In the html file:

  & lt; Div id = "header_index" & gt; & Lt; / Div & gt;  

This image 1. The Jpg side-by-side sticks horizontally.

What I want is to show the same exact form, but with many images.

How can I get an "array" or whatever from the images so that this image is 1.jpgimage2.jpgimage3.jpg without any limit. I tried to use tables and divas, but could not get rid of the limit and besides, I want to use the same approach that I'm already using (where the image is specified in the CSS file).

Thank you.

Assume that you want 4 images in each row, so there will be 4 columns and 25 in each column % Width will be.

  & lt; Div class = "col-1-4" & gt; & Lt; / Div & gt; & Lt; Div class = "colon-1-4" & gt; & Lt; / Div & gt; & Lt; Div class = "colon-1-4" & gt; & Lt; / Div & gt; & Lt; Div class = "colon-1-4" & gt; & Lt; / Div & gt;  

Let's set the width in the CSS and float on the left so that they are not in the flow of the document.

 . Col-1-4 {width: 25%; Swim left; }  

Now, we are going to add an image inside each div. Here is an example div.

  & lt; Div class = "col-1-4" & gt; & Lt; Img src = "(keep the URL of IMAGEHERE)" / & gt; & Lt; / Div & gt;  

As you can tell, if the image is bigger than the div, then let's fit the width of all the images inside the column div.

  img {max-width: 100%; }