title: bootstrap 3 layout overlap - lack of understanding
body: <p>I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.</p>
  
  <p>Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.</p>
  
  <p>Looking at it with chrome the first row appears to have no height, despite the image.</p>
  
  <p>There's something I'm missing or don't understand here.</p>
  
  <p><strong>Update</strong>
  The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative. </p>
  
  <p>Here's an image of what I'm trying to create (90% there)
  <img src="https://i.stack.imgur.com/QKMNl.jpg" alt="enter image description here"></p>
  
  <p>I've created a jsfiddle here: <a href="http://jsfiddle.net/longestdrive/vt24K/" rel="nofollow noreferrer">http://jsfiddle.net/longestdrive/vt24K/</a></p>
  
  <p>the html is below:</p>
  
  <pre><code>&lt;div id="hole-stats-modal"&gt;
  &lt;div class="container" &gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;!-- image --&gt;
              &lt;img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" /&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;     
      &lt;!-- hole stat panel --&gt;
      &lt;div id="hole-stats-panel" class="transparent-back"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;!-- side stats --&gt;
                      &lt;h3&gt;Hole Detail&lt;/h3&gt;
                      &lt;p&gt;Content for this panel&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- hole text info --&gt;
      &lt;div id="course-guide" class="transparent-back"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-1"&gt;
                      &lt;h3 id="hole-n-2" &gt;3&lt;/h3&gt;
  
                  &lt;/div&gt;
                  &lt;div id="hole-description" class="col-sm-8 "&gt;
                      &lt;p&gt;Some text here&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="hole-navigation"&gt;
            &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;ul class="unstyled list-inline"&gt;
  
                        &lt;li&gt;&lt;a href="1"&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="2"&gt;2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="3"&gt;3&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="4"&gt;4&lt;/a&gt;&lt;/li&gt;
  
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;  
  </code></pre>
  
  <p>The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not</p>
  
  <p>Any help appreciated</p>