HTML - Displaying Images side by side

Question

I am trying to put images side by side on my e-commerce website. My code is given below.I don't have any CSS on it.How can i make the website for checkout(Its just for tesing purposes so website wont be alive).

Should I use javscript or anything else ?

HTML-:

  <span class="image">

    <p style="float:left ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
      <a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px;  padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
      <a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
      <a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
    </p>

    <p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">     
      <a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
      <a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
      <a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
    </p>

    <p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
      <a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
      <a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
      <a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
    </p>

  </span>

Answer 1

Try This Code

<span class="image">
  <table align="center">
    <tr>
      <th><a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px; " ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a> </th>
      <th><a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a></th>
    </tr>      

    <tr>          
      <th><a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a></th>
    </tr>

    <tr>
      <th><a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a></th>
      <th><a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a></th>
      <th><a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a></th>
    </tr>
  </table>
</span>

Answer 2

An alternative to tables would be simply changing img tag CSS to display:inline and then adding text-align:center to p, so:

<span class="image">
    <p style="text-align:center ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
    <a href="order.html"><img src="images/kitmu.jpg" style="display: inline; width: 180px; margin-bottom: 5px;  padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
    <a href="order.html"><img src="images/kitliver.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
    <a href="order.html"><img src="images/kita.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
    </p>
    <p style="text-align:center; clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">     
    <a href="order.html"><img src="images/kitmc.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
    <a href="order.html"><img src="images/kitc.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
    <a href="order.html"><img src="images/Afootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
    </p>
    <p style="text-align:center; clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
    <a href="order.html"><img src="images/cfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
    <a href="order.html"><img src="images/pfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
    <a href="order.html"><img src="images/nfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
    </p>
</span>

Answer 3

You could set them inside of a table

<table>
<tr><a href='#.html' style='float:left'><a href='#.html' style='float:right'></tr>
</table>

Answer 4

The problem you are facing is caused by the fact that your container's (which is paragraph tag) width is the same as the width of single image (there is no place for all of those 3 images to fit inside the specified container width). You need to remove this:

width: 180px;

from your paragraph inline style.

And also you need to specify float:left for anchor tags instead of paragraph therefore add

style="float:left"

to each of < a > tags.