title: Make an image have a static position relative to its parent container?
body: <p>I'm making an image preview container, found at <strong>bottom of the page</strong> at this URL:</p>
  
  <p><a href="http://cowperthwaite.dev.mybusinessadmin.com/location/51447" rel="nofollow">http://cowperthwaite.dev.mybusinessadmin.com/location/51447</a></p>
  
  <p>At the bottom, you can see that the thumbnail images get a scroll bar because there's more than can fit in the height of the parent container. That's fine and is working as intended.</p>
  
  <p>The problem I'm having is that I need the LARGE image on the left to <em>always stay in view</em>, even when scrolled down. In other words, I need it to stay static in relation to its parent div - always within the yellow box - whereas the thumbnails have a scroll area.</p>
  
  <p>I've tried all manner of <code>position:_______</code> variations to no avail, and I feel like I'm missing some higher concept here. I'm also not sure if what I'm trying to accomplish is even possible.</p>
  
  <p>Would someone mind providing some insight? Thanks in advance</p>
  
  <p>EDIT: derp, didn't provide my code...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="pictureBoxContainer"&gt;
      &lt;div class="pictureBox"&gt;
          &lt;div class="pBoxLeftColumn"&gt;
              &lt;?php
                  echo "&lt;div class='pBoxLargeImageContainer'&gt;";
                  echo "&lt;img src='$pictureLinks[0]' id='largeImage' alt='Primary Image' class='pBoxLargeImage'&gt;";
                  echo "&lt;/div&gt;";
              ?&gt;
          &lt;/div&gt;
          &lt;div class="pBoxRightColumn"&gt;
              &lt;?php
              foreach ($pictureLinks as $picture) 
              {
                  echo "&lt;div class='pBoxSmallImageContainer'&gt;";
                  echo "&lt;img src='$picture' alt='Thumbnail' class='pBoxSmallImage'&gt;";
                  echo "&lt;/div&gt;";
              }
              ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.pictureBoxContainer {
      padding: 12px;
      clear:left;
      clear:right;
      width: 100%;
      background-color: #F7D961;
      border-radius: 12px;
      max-height: 350px;
  }
  
  .pictureBox {
      background-color: #FFF;
      border-radius: 12px;
      width: 97%;
      overflow: auto;
      padding: 12px;
      max-height: 300px;
  }
  
  .pBoxLeftColumn {
      display: block;
      float: left;
      min-width: 49.99%;
      max-width: 49.99%;
      overflow: auto;
  }
  
  .pBoxRightColumn {
      display: block;
      float: right;
      min-width: 49.99%;
      max-width: 49.99%;
      overflow: auto;
  }
  
  .pBoxSmallImageContainer {
      height: 103px;
      width: 145px;
      float: left;
      padding: 3px;
      margin: 3px;
      background-color: #F7D961;
      border-radius: 2px;
      position: relative;
  }
  
  .pBoxSmallImage {
      max-height: 95px;
      max-width: 138px;
      margin: auto;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  
  .pBoxLargeImageContainer {
      width: 100%;
  
  }
  
  .pBoxLargeImage {
      border-radius: 6px;
      min-width: 450px;
      max-height: 300px;
      position: static;
  }
  </code></pre>