I am working on a 2 column layout that should have a height of 100% of the window size. The left side will contain an image taking up 90% of the window size positioned at the bottom of the wrapper. On the right side, there will be text occupying the top 50% of the height and an image below it also taking up 50% of the height. Both images need to be responsive to the window size without overflowing onto other page elements.
Check out my code here: http://jsfiddle.net/jfarr07/7TctY/2/
HTML
<div class="background">
<div class="wrapper">
<div class="leftside">
<div class="imgspacer"></div>
<div class="img"></div>
</div>
<div class="rightside">
<div class="text">lakjsd;lfjas;ldjf;alsdjf;lasdlkfjas;ldjf;alsdjf;laksjdfl;kasjdf</div>
<div class="rightimage"></div>
</div>
</div>
</div>
CSS
body,html {
height:100%;
min-height:100%;
}
.background {
background-size:cover;
height:100%;
min-height:100%;
background-color:#333;
}
.wrapper {
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
background-color:#fff;
}
.leftside {
height:100%;
min-height:100%;
width:50%;
float:left;
}
.imgspacer {
height:10%;
background-color:#222;
width:100%;
}
.img {
height:90%;
background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg);
width:100%;
background-repeat:no-repeat;
}
.rightside {
background-color:#888;
width:50%;
height:100%;
min-height:100%;
float:right;
}
.text {
width:100%;
height:50%;
}
.rightimage {
width:100%;
height:50%;
background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg);
background-repeat:no-repeat;
}