title: HTML/CSS Image grid
body: <p>I am a back-end developer and I need a little help with some HTML/CSS to replace one large image with multiple small images. The smaller images should take up the exact same area as the larger image. Here's the HTML I have now for the larger image:</p>
  
  <pre><code>&lt;table border="0" cellspacing="0" cellpadding="0" width="300"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="myimage.jpg" width= "300" height="190" border="0"&gt;
          &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So the above works perfectly to display my large image. Now I want to replace the img tag with some divs, I think?, and some CSS so that I can place small images by x and y position so that when pieced together occupy the same 300x190 as the large image.</p>
  
  <p>For example if I assume that the top left is 0, 0 and x increases as I go to the right and y increases as I go down and I'm placing my images using the x,y of the upper left hand corner. Then I could take two images that are both 150x190 and place the first at 0,0 and the second as 150,0.</p>
  
  <p>What is the best HTML/CSS for this?</p>
  
  <p>Edit: I need to handle this in an arbitrary sense. So there couple be a bunch of small images that all have their own x,y as opposed to the simple example above.</p>