title: Position image over image on two neighbour divs
body: <p>I want to have a centered box with two images on each side of a box, overlapping. Later, I'll move top image for each box with jquery animate function away from bottom image.</p>
  
  <p>This is my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body,
  #wrapper {
    height: 100%;
    min-height: 100%;
  }
  #wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  #center {
    width: 800px;
    border: 1px solid black;
    text-align: center;
    position: relative;
  }
  img {
    width: 100%;
    height: auto;
    float: left;
  }
  #left {
    //border:1px solid red;
    width: 400px;
    float: left;
    //position:absolute;
  
  }
  #right {
    //border: 1px solid green;
    width: 400px;
    float: right;
    //position:absolute;
  
  }
  #top {
    z-index: 1;
  }
  #under {
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="css/style1.css"&gt;
    &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="wrapper"&gt;
      &lt;div id="center"&gt;
        &lt;div id="left"&gt;
          &lt;img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top"&gt;
          &lt;img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under"&gt;
        &lt;/div&gt;
        &lt;div id="right"&gt;
          &lt;!--&lt;img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under"&gt;--&gt;
          &lt;img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;footer&gt;
  &lt;/footer&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have managed to center this box and add one picture for each side (left, right), but when I want to add another picture on either side, that has z-index: -1 it breaks into new line..</p>
  
  <p>Fiddle that is showing problem: <a href="https://jsfiddle.net/bjgydLvo/" rel="nofollow">https://jsfiddle.net/bjgydLvo/</a></p>