title: aligning image side by side position (css + html)
body: <p>Im a looking to make four pic side by side yet unsuccessul. Two on top two on the bottom. I want to make sure that they stay the same with all browser size except mobile. 
  Here is my attempt so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#imageone{
    position: absolute;
    top:0px;
    width: 50%;
    padding:0px;
  }
  
  #imagetwo{
    position: absolute;
    width: 50%;
    left:50%;
  
  }
  
  #imagefour{
    position: absolute;
    width:50%;
    top:1000px;
    
  }
  
  
  #imagethree{
    position: absolute;
    width:50%;
    left: 50%;
    top:1200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="image"&gt;
  &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/&gt;
  
  
  &lt;img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&amp;s=abfa7882ea0fca1fab6a6c2a7d76c0c9&amp;auto=format&amp;fit=crop&amp;w=933&amp;q=80" id="imagetwo"/&gt;
  &lt;img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&amp;s=246fd0d0ce33fcb5901efece89d14c49&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80" id="imagethree"/&gt;
  &lt;img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&amp;s=9cb9c66926a12de24fbc525f0504bf2d&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80" id="imagefour"/&gt;
  
  
    &lt;div&gt;</code></pre>
  </div>
  </div>
  
  Here it is hosted on codepen <a href="https://codepen.io/anon/pen/mXQpOV" rel="nofollow noreferrer">link</a></p>
  
  <p>here is visual description : <a href="https://i.stack.imgur.com/15yYi.png" rel="nofollow noreferrer">link</a> Note: without the padding and margin and borderline (of course!)</p>