css - レスポンシブ 2 カラムの絶対配置

Question

2 つのセクション (メイン コンテナー) を持つ 1 ページのレイアウトがあります。各メイン コンテナーの高さと幅は 100% です。セクション 2 の画像クラス「pic」をセクション 2 の下部に配置する絶対位置を設定したいと思います。現時点では、セクション 1 の一番下にあります。私は何かを正しくクリアしていないと思います。(mobile first initializr) テンプレートを使用しています。http://www.initializr.com

あまり役に立たないかもしれませんが、ここにフィドルがあります

デモhttp://jsfiddle.net/jfarr07/7dWeY/

HTML

 <div class="main-container3" id="sponsorship">
        <div class="main wrapper clearfix">
            <article>
                <header class="branding">
                 OH THE POSSIBILITIES
                </header> 
            </article>
        </div> <!-- #main -->
 </div> <!-- #main-container3 -->


<div class="main-container4" id="promotion">
<div class="wrap">
<div class="jared">
    <img class="pic" src="images/jared.png" /></div>
<div class="jaredinfo"></div>

</div>
</div> <!-- #main-container4 -->

CSS

body {
height:100%;
overflow:scroll;
}
html {
height:100%;
}
article, aside, header {
display:block; 
}
}
.main-container3 {
background-image:url(../images/gopherbackground.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height:100%;

}
.main-container4 {
background-image:url(../images/graybackground.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height:100%;
}
.wrap {
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
}
.jared {
background-color:#0C6;
float:left;
position:relative;
height:100%;
min-height:100%;
width:40%;
}
.jaredinfo {
background-color:#C60;
float:right;
position:relative;
height:100%;
min-height:100%;
width:60%;
}
.pic {
position:absolute;
bottom:0;
}
.branding {
font-size:44px;
color:#FFF;
font-family: source-sans-pro, sans-serif;font-weight:700;
text-align:center;
}
.wrapper {
width: 90%;
margin: 0 5%;
max-width:1000px;
}
.main {
padding: 30px 0;
}