CSS/HTML - Footer placement inside 2 wrappers - html

Question

I have a bit of a problem placing a footer. It's supposed to float above 2 side by side columns (http://imgur.com/dfiT1). Now the problem is, it needs to be aligned well so that the border of the 2 columns is aligned with the border of the 2 parts of the footer, AND, it needs to have a minimum margin of say 100px on both columns, so that the footer doesn't float above the content of either of the columns when a page has very little or a lot of content.
I've tried resolving this with a coworker by using an extra wrapper, a clearfix, jquery for height adjustment but we can't seem to find a solution.
so in short: Footer needs to stick to the same position in big and small resolutions, minimal margin-top on both columns

Answer 1

Try do add min-height: 100%; to both columns, and put them in the same div.

Answer 2

The best solution, in my opinion, would be to place the footer outside of the two columns. But I know that sometimes there are constraints that you can't change, so a possible solution would be:
HTML
<div class="wrapper"><div id="column1" class="column">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, lobortis et adipiscing non, vestibulum et tortor. Praesent aliquam placerat enim sit amet blandit. In ipsum dui, accumsan at hendrerit nec, tempus in augue. Etiam molestie, orci a feugiat tempus, nunc quam posuere libero, et ultrices libero sem porta arcu. Donec varius, massa at feugiat accumsan, mi lacus aliquam arcu, id faucibus arcu felis et sapien. Praesent sit amet tortor nibh. Nam mollis, ante quis iaculis fringilla, ante sapien dignissim ligula, in dignissim urna nisl ut ante. Mauris eget diam justo, nec tempor justo. Donec vel eros eget risus rhoncus dapibus. Nullam at felis faucibus orci molestie feugiat sit amet ut augue. Vestibulum at tellus tortor, non tempus quam. Phasellus adipiscing ante a purus congue ultrices in non justo. Ut ullamcorper porttitor quam, sit amet tincidunt mauris hendrerit at.
</div>
<div class="footer">
Donec facilisis accumsan nisl
</div>
</div><div id="column2" class="column">
<div class="content">
Aenean pharetra sagittis ipsum, vitae pulvinar nunc aliquet ut. Fusce sit amet elit dui, a vulputate risus. Maecenas in laoreet tortor.
</div>
<div class="footer">
Pellentesque malesuada ligula eget justo
</div>
</div>
</div>
CSS
html, body, .wrapper {
margin:0;
border:0;
outline:0;
}
.column {
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
}
#column1 {
width: 30%;
background-color:teal;
}
#column2{
width: 70%;
background-color:coral;
}
.wrapper{
position: relative;
background-color: black;
padding-bottom: 200px;
}
.footer {
position: absolute;
bottom: 50px;
background-color: silver;
}
#column1 .footer {
right: 70%;
}
#column2 .footer {
left: 30%;
}
live demo
There would be other solutions, but this one seems the easiest to me, as lond as the footer's height is constant.