bootstrap 3 layout overlap - lack of understanding - css

Question

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.
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.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated

Answer 1

I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>