I'm trying to accomplish a simple layout with a full width header, 984 center column with a horizontal and vertically centered presentation div and a bottom footer.. does anyone know away to keep the center ap div from going off the screen when when the window is resized, I would also like the divs not to overlap all together.. which is happening because of the ap/fixed positioning.. Am I approaching this complety backwards? I've tried many css approches that didn't pan out :/
This is what I've done so far ..
Code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/type.css">
<!--<link rel="stylesheet" href="css/zxc.css">
-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/*** SEE BELOW *** ">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--sticky footer-->
<script type="text/javascript">
function positionFooter() { var mFoo = $("#footer"); if ((($(document.body).height() + mFoo.height()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) { mFoo.css({ position: "fixed", bottom: "0px" }); } else { mFoo.css({ position: "static" }); } } $(document).ready(function () { positionFooter(); $(window).scroll(positionFooter); $(window).resize(positionFooter); $(window).load(positionFooter); });
</script>
<!--horiz & vert center div-->
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function(){
$('.centerBlock').css({
position:'absolute',
left: ($(window).width() - $('.centerBlock').outerWidth())/2,
top: ($(window).height() - $('.centerBlock').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<div id="headerWrap">
<div id="header">header</div>
</div>
<div id="middleContainer" >
<div id="messageWrap" class="wrapper-holder">
<div id="messageBox" class="centerBlock">
<h1>Header 1</h1>
</div>
<!--<div id="footerWrap">
--> <div id="footer">footer</div>
<!--</div>
--></body>
</html>
Code:
#wrapper, #header, #headerWrap, #contentWrap, #middleContainer, #messageWrap, #messageBox, #footerWrap, #footer {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, { background-color: #6CC; height: 100%; }
#wrapper {
width: 100%;
height: 100%;
}
.wrapper-holder {
padding: 95px 0 50px;
vertical-align: middle;
}
#headerWrap {
width: 100%;
height: 110px;
background-color: #333;
}
#header {
width: 984px;
margin: 0 auto;
height: 110px;
background-color: #444;
}
#middleContainer {
width: 984px;
margin: 0 auto;
height: 100%;
}
#messageWrap {
width: 984px;
margin: 0 auto;
vertical-align: middle;
}
#messageBox {
width: 984px;
margin: 0 auto;
padding: 50px 50px 50px 70px;
background-color: #F33;
}
#footer {
width: 984px;
margin: 0 auto;
height: 110px;
background-color: #FF6;
margin-top: 50px;
padding: 70px;
}
Before you post, read our: 
