Vertically Aligning Content in Zurb Foundation - css

Question

I am building a website with Zurb Foundation. I want to include a DIV. This div will have two columns. The left column will show an image. The second column will hold a paragraph and a button. I want the button to be vertically aligned against the bottom of the grid. In other words, I want the bottom of my button to align with the bottom of my image. Currently, I am trying the following:
<div class="sample">
<h1>This is the title</h1>
<ul class="inline-list">
<li>John Smith</li>
<li>October 12, 2013</li>
</ul>
<div class="row">
<div class="large-5 columns">
<div>
<img src="/images/paper.jpg" style="width:100%;" />
</div>
</div>
<div class="large-7 columns" style="background-color:yellow;">
<p>A paragraph will go here</p>
<a class="button small" href="[someUrl]">
<span>keep reading</span>
<span class="icon-arrow-right5" style="font-weight:lighter; vertical-align:middle;"></span>
</a>
</div>
</div>
</div>
I can't get the "keep reading" button to vertically align with the bottom of the image in the left column. Is there a way to do this in Zurb Foundation? If so, how?

Answer 1

The easiest way to get this done is to float two containers (one for image and one for text) next to each other, with a paragraph text box and a button box inside of the text container.
Give the paragraph box a max-height that would approximate about 70-80% of your image's height (depending on how wide the paragraph box is) and put an overflow:hidden; on it in case your text runs long and you don't want your layout breaking. Place the button below the fixed height paragraph box with a simple top margin and you should be good.
You could align these boxes I've made with Zerb's grid to get this done, but Zerb's grid has horizontal columns only: you'll have to add in these vertical alignments to achieve your goal.
Check the code out here:
http://jsfiddle.net/73fct/2/
HTML:
<div class="container">
<div class="image-box">
<img src="http://nutritionwonderland.com/wp-content/uploads/2010/10/bee-emrank-flickr-300x300.png" width="300" height="300" alt="A Honey Bee" />
</div>
<div class="text-box">
<p class="paragraph">
Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens.
</p>
<div class="button">Bees!</div>
</div>
</div>
CSS (backgrounds on the elements are just to show structure for you):
.container {
min-width: 480px;
}
.image-box {
float: left;
position: relative;
}
.text-box {
background: #ffa3d0;
min-height: 300px;
float: left;
position: relative;
width: 180px;
}
.paragraph {
background: #a3cdff;
padding: 10px;
max-height: 205px;
overflow: hidden;
}
.button {
background: #c5ffa3;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 50px;
}