Make bootstrap spans fill container height wise

Question

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>

Answer 1

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;
}

Answer 2

This doesn't work because the Instagram and Blog portions are have float: left;, which breaks the flow of the document. If backwards compatibility isn't the biggest issue, I recommend using a flex-box, as this will allow you to control the size of the elements and the position of their content. This technique is supported by nearly 90% of browsers (source).

If you can't use flex-boxes, try setting all of the elements to a predefined height, that way the box shadow will extend to the height you want it to extend.

If that's also not an option (e.g. you need the elements to have a variable height), then you might benefit from using display: table; and display: table-cell;. These CSS declarations will allow the most backwards compatibility but they aren't a favorite of mine because they're slightly antiquated. It would work something like this:

.container {
    display: table;
}

.child {
    display: table-cell;
}

That should be a good starting point for the result you desire.