Take a look at my website:
Also, check out my upcoming project here:
I'm almost there with the layout, but when you resize the browser vertically too much, it creates a gap.
I am unable to debug resolutions higher than mine (1280x800), and I suspect something else breaks in the opposite direction.
Update: Could the size of the photo be causing the issue? Zeitgeist uses an 800x800 square image, while I use a rectangle?
The problem might also lie in errors within the structure of my HTML code (this layout is challenging for me).
<section class="bodySection">
<div id="body-wrapper-left" class="">
<div id="me"></div>
<div id="pattern"></div>
</div>
<div id="body-wrapper-right"> </div>
<div class="clearfix"></div>
</section>
<!--end of bodySection-->
or my CSS:
html, body, #body-wrapper, .bodySection {
height: 100%;
}
#body-wrapper-left {
position: relative;
width:35%;
height: 100%;
}
#body-wrapper-left #me {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('http://designobvio.us/portfolio/img/Me.jpg') repeat-y;
z-index: 1;
-o-background-size:auto 100%;
-webkit-background-size:auto 100%;
-moz-background-size:auto 100%;
background-size:auto 100%;
-webkit-transition: all 0.20s ease-out;
-moz-transition: all 0.20s ease-out;
-o-transition: all 0.20s ease-out;
transition: all 0.20s ease-out;
}
#body-wrapper-left #pattern {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('http://designobvio.us/portfolio/img/sliderBG.png') repeat;
z-index: 2;
}
#body-wrapper-right {
position: absolute;
height: 100%;
right:0;
top:0;
min-width:65%;
width:65%;
background:#fff;
z-index:9;
}
It seems like there may be a specific min-height or min-width value affecting the layout. Can anyone help pinpoint where and what adjustments I need to make to achieve uniform widths and heights similar to Google Zeitgeist's design?