Make bootstrap spans fill container height wise

Website is get2gethersports.com

On the make page you see [content] [instagram] [blog]

I have a box shadow around instagram and blog.

I want that box shadow to stretch to the bottom of the content area.

I tried

#undrl {

   height:100%;
}

but it did nothing.

any ideas?

UPDATE code for this custom html module is

<div class="span6">
<p style="text-align: center;"><strong style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal;"><span style="font-size: medium; font-style: italic;">Join. Create. Compete.&nbsp;</span></strong></p>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">&nbsp;</div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">get2gether|sports is the perfect way to organize a pick-up game of any sport. You can find a game to join, or create your own! Feel free to shoot us an email with any questions you have!&nbsp;</div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">&nbsp;</div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">Subscribe below to stay in-touch with up-coming games!&nbsp;<br /><br /></div>
{loadposition login-join} {loadposition logout-home}</div>
<div id="undrl" class="span3" style="text-align: center;">{loadposition instagramfeed}</div>
<div id="undrl" class="span3" style="text-align: center;">{loadposition blogfeed}</div>
</div>

Solution

since your columns, [content] [instagram] [blog], are floating left, they will only take up as much space as needed. To fix this:

.item-page {
display: table;
height: 280px;
}

.item-page > div {
float: none;
display: table-cell;
margin-left: 20px;
vertical-align: middle; // or padding-top % if you don't want to declare a height on the table
}
.item-page > div:first-child
{
margin-left: 0;
}

Here's a better solution not using table-cells (wrap these items in a div and set the height to 280px if multiple rows):

.item-page
{
height: 280px;
}

#undrl {
text-align: center;
display: inline-block;
float: none;
margin-left: 20px;
height: 100%;
vertical-align: top;
width: 23%;
}

.item-page .span6
{
float: none;
display: inline-block;
}