Foundation 5 - Having trouble with nesting columns

Hello,

I am using Foundation to create 2 columns that contain navigation buttons and a photo carousel. The navigation is inside a column with a width of 4 and the carousel is contained inside a column with a width of 8. This image is an example of what I am trying to shoot for:

There are 2 problems:

(1) If you look at the image below, I wanted to see if I could have 2 buttons on the top and 2 on the bottom, positioned to the left of photo carousel. So I nested 2 rows inside the 4-width column and placed the buttons inside each row.

The problem is that the height of the column does not equal the same height as the carousel column. This remains the same when I re-size the browser window. How can I create equal-column heights in Foundation?

(2) I’m using Mozilla’s Responsive View and when I re-size the window to 640x640, the buttons revert back to their original size and they are stacked on top of each other. This happens because of the way I nested the columns. Instead of this I would like to have the buttons evenly spaced above or below the photo carousel. How can I change my nested columns to create this?

Here is what is I would like to happen when the browser is re-sized:

Instead, this happens:

My code is available below, and I am only using basic foundation styles for the CSS. The background.jpg is 638 x 256 px

HTML CODE

<div class="row">

<div class="medium-4 large-4 columns" style="background-color: silver;">

	<div class="row" style="margin-bottom: 1em;">
		<div class="medium-6 large-6 columns"><img src="a.gif"></div>
		<div class="medium-6 large-6 columns"><img src="b.gif"></div>
	</div>

	<div class="row">
		<div class="medium-6 large-6 columns"><img src="c.gif"></div>
		<div class="medium-6 large-6 columns"><img src="d.gif"></div>
	</div>

</div>

<div class="medium-8 large-8 columns">
 		<section id="photo-carousel" class="container2">
      	<div class="row" style="margin-bottom: 0;">
        	<div class="small-12 medium-12 large-12 columns">
					<div id="owl-container" class="owl-carousel" style="margin-bottom: 8px;">

            		<div class="item">
            			<a href="#"><img src="img/background.jpg" alt="slide example one"></a>
            		</div>		  


            		<div class="item">
            			<a href="#"><img src="img/background.jpg" alt="slide example one"></a>
            		</div>
    
					</div>
        	</div>
      	</div>
   	</section>
</div>
  CSS
  /* CAROUSEL CSS STYLES */

     .container2 {
      width: 100%;
	  margin-left: auto;
	  margin-right: auto;
	  line-height: 0;
      }

  .container2:before,
  .container2:after {
  display: table;
  content: "";
  line-height: 0;
  }
 .container2:after {
  clear: both;
  }


 #photo-carousel {
    background-color: #cccccc;
}

#owl-container .item img{
    display: block;
    width: 100%;
    height: auto;
    position: relative; /* added on SEPTEMBER 4, 2014 */
}

 
 .owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;

}

Just started using Foundation5 at my work (well I just started work but I just had to start learning it)

http://foundation.zurb.com/docs/components/equalizer.html

The Foundation Documentation place is very useful. Does this do what you need?