I've designed a simple layout featuring 2 columns and a footer that adjusts based on the height of the longer column.
<div id="holder">
<nav class="navbar navbar-default navbar-fixed-top"></nav>
<div class="container">
<div class="row">
<div class="left col-md-8">
Expands with content
</div>
<div class="right col-md-4">
Expands with content
</div>
</div>
</div>
<div class="footer">
Adaptable behavior based on the content length of either column. Stays at the bottom when content is short.
</div>
See the complete code with CSS: http://jsfiddle.net/TNRqL/
What's a smart way to ensure that both columns have the same height and also align with the footer?
Check out this example: http://jsfiddle.net/xJ6Cv/ (I used min-height on left and right columns)
I came across a solution in another post to equalize the height of columns, regardless of their content length, but it doesn't keep them aligned with the footer.
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}