title: CSS - How to position multiple images
body: <p>I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.</p>
  
  <p>I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
  So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
  I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced. </p>
  
  <p>The example is in red, is how I want it to look. 
  <a href="https://i.imgur.com/q1PWaQJ.png" rel="nofollow noreferrer">look here for an example of how I want it to look.</a>
  <strong>HTML</strong></p>
  
  <pre><code>&lt;div class="batesimg"&gt;
  &lt;p&gt;&lt;strong&gt;Bates&lt;/p&gt;&lt;/strong&gt;
  &lt;div class="shadow"&gt; &lt;!-- makes a shadow, surrounding the characters picture. --&gt;
  &lt;img src="images/bates.png" alt="Bates" width="150" height="150"&gt; &lt;!-- defines the img --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* Bates profile picture. */
  .batesimg { /* or whatever class name works for you */
  position: auto;
  left:250px;
  top:250px;
  margin-right: 500px;
  }
  </code></pre>
  
  <p><strong>NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
   Thanks!</strong></p>