I’m using Foundation's row / column layout.

// Layout

<div class="row">
  <div class="medium-3 columns navs">...</div>  <!-- nav links -->
  <div class="medium-9 columns content">...</div> <!-- page content -->
</div>


<style>
.navs {
  border-right: solid 1px #000; //black
}
.content {
  border-left: solid 1px #000; //black
}
</style>

I want to have a vertical border that stretches the length/height of the shared border/side of these two columns. My problem is that while both columns appear to be the same height (container-wise), their content is rarely uniform in length. On some pages the nav links appear longer than the content in the content div. On some, the content in the content div is longer.

Regardless of which class I style a border on, there are pages that show a gap at the bottom of the border because it only extends to length of the content in that div.

Any thoughts on how to fix this?

Thanks,