title: Bootstrap 3 - Img on top of Img when resizing
body: <p>I have been using the code from <a href="https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html">this</a> post to place two images (fbook icon and a banner) on top of a main poster image. This is how the code looks like in my bootstrap index file:</p>
  
  <pre><code>   &lt;div class="container"&gt;
        &lt;div class="row"&gt;
  
           &lt;div class="col-sm-4"&gt;
  
           &lt;/div&gt;
  
           &lt;div class="col-xs-12 col-sm-4"&gt;
  
              &lt;div style="position: relative; left: 0; top: 0;"&gt;
                &lt;img class="poster center-block" src="images/poster.png" style="position: relative;"/&gt;
                 &lt;a href="https://www.facebook.com/" target="_blank"&gt;
                    &lt;img class="fbook" alt="Facebook!" src="images/fbook.png"/&gt;
                 &lt;/a&gt;
                 &lt;a href="http://www.yo.com/" target="_blank"&gt;
                    &lt;img class="banner" alt="Yo!" src="images/banner.png"/&gt;
                 &lt;/a&gt;
              &lt;/div&gt;
  
           &lt;/div&gt;
  
           &lt;div class="col-sm-4"&gt;
  
           &lt;/div&gt;
  
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This is the current css:</p>
  
  <pre><code>img.poster {
      position: relative; 
      padding-top: 5px;
      max-width: 250px;
  }
  
  img.fbook {
      padding-top: 25px;
      max-width: 65px;
      position: absolute;       
  
      -ms-transform: rotate(-3deg); /* IE 9 */
      -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
      transform: rotate(-3deg);
  }
  
  img.banner {
      padding-top: 25px;
      max-width: 235px;
  
      position: absolute;       
  }
  </code></pre>
  
  <p>The two images stays in place until the columns collaps at about .col-sm-/768px. From 768px and down, the two images will use the col-xs-12 border to align, and they are placed to far left of the main poster image. The main poster image is centered in the middle of the col-xs-12 width the center-block class. </p>
  
  <p>It seems like the col-sm-4 will align just around the main poster image, so that the other two images on top uses this column border in order to align themselves. When the clumn collapses to col-xs-12 the left clomun border will be placed futher to the left. </p>
  
  <p>When using col-xs-4 the same thing happend..</p>
  
  <p>I would like a to find a way to place the two images on top of the main poster image, so that they will stay in place when the window is resized and the columns collapses.  </p>
  
  <p><strong>UPDATE - SOLUTION:</strong></p>
  
  <p>css:</p>
  
  <pre><code>.columnWidth {
      width: 33.33333333%;
      margin-left: 5%;
  
  } 
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="col-sx-12 col-sm-4 columnWidth"&gt;
  </code></pre>