I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it… i have a moch up of what i require, built from all sorts of different templates i have found… i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south… i am hoping somone on here can understand what i mean and fix it easily as I am lost… tried so many different things however just end up back to square one…
I have checked out “vertically-center-content-with-css” at vdotmedia and this is exactly what i need the div to do however i can’t get it working in the template i have come up with… i do want it to be cross browser and ie6 would be nice but at least ie7… I know there are lots of sites regarding auto div alignment such as http://stylizedweb.com/2008/02/01/vertical-align-div/ however i think what i need is slightly different… or i just dont know what i am doing…
Thanks in advanced!
The CSS
* {margin:0;padding:0;}
html,body {height:100%;padding:0}
html {overflow-y:scroll;}/*keep scrollbar position present in FF*/
body {
background:#FFFFFF;
background-attachment:fixed;
font-size: 100%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
color: #000;
}
#wrapper {
margin:0 auto;
width:900px;
min-height:100%;
background:#FFFFFF; /*important for good browsers since min-height:100%; is on this div*/
border-left: 0;
border-right: 10;
}
#header {
width:100%;
height:110px;
position:fixed;
top:0;
left:0;
z-index:5;
}
#innerhead {
height:110px;
border-bottom: 0;
background:#666666;
color: #FFF;
}
#innerwrap {/*IE6 gets it's own styling for this*/}
#main{
margin:0 auto;
width:900px;
background:#FFFFFF;/*this is here to be picked up by IE6*/
position:relative; /*establish containing block for AP #rightwrap*/
}
.top-pad {height:110px}/* same height as header to preserve space*/
#content {
width:698px; /*actual space available is 699px, let's keep it an even number*/
margin-left:200px;
text-align:center;
padding-bottom:20px; /*give bottom padding for textual content*/
background:inherit; /*inherhit #main BG color for 100% height appearance with minimal content*/
line-height:1.2;
}
#right-wrap {
width:200px;
border-left: 0; /*201px total width with left border*/
position:absolute;
top:110px; /*same as header height*/
bottom:130px; /*same as footer height*/
right:700px;
background:#BCC5E1;
}
#right-inner {
position:fixed;/*for good browsers*/
width:200px;
top:110px; /*same as header height*/
bottom:130px; /*same as footer height*/
padding-bottom:20px; /*give bottom padding for textual content*/
padding-left: 5px;
background:#BCC5E1;
overflow:auto; /*give insurance for text acessability at smaller viewport heights*/
}
.bot-pad {height:110px}/* same height as footer to preserve space*/
#footer {
width:100%;
height:130px;
position:fixed;
bottom:0;
left:0;
z-index:5;
}
#innerfoot {
height:129px;
border-top: 0;
background:#666666;
color: #FFFFFF;
}
The HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cross Browser "Fixed Header-Footer-Sidebar" ( IE6-JQuery )</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
</head>
<body><!--root element for modern browsers-->
<div id="wrapper"><!--root element for IE6-->
<div id="header">
<div id="innerhead">Header Fixed</div>
</div>
<div id="innerwrap">
<div id="main">
<div class="top-pad"></div><!--preserve the header space-->
<div id="right-wrap">
<div id="right-inner">
<h3>Fixed Sidebar</h3>
<p>Need this auto center to match the right content</p>
</div>
</div><!--end right-wrap-->
<div id="content">
<p> Main Need This to auto Center Vertically</p>
</div>
<!--end content-->
<div class="bot-pad"></div><!--preserve the footer space-->
</div><!--end main-->
</div><!--end innerwrap-->
<div id="footer">
<div id="innerfoot">Footer Fixed</div>
</div>
</div><!--end wrapper-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" media="screen">
<script type="text/javascript">
$(function(){ // run all of this on document.ready (document.ready is jQuery talk)
var resizing = false;
init(); // run the init function
$(window).resize(function(){ // bind a resize event to window
init(); // run the init function on window resize
window.location.reload() // reload the window after init() runs
});
function init(){
if(!resizing){
resizing=true;
window.setTimeout(function(){ // all code in a setTimeout will run after the set # of milliseconds passes as set below
var viewPortHeight = $(window).height(); // set viewport height to a variable
var headerHeight = $("#header").css("height"); // set header height to a variable
headerHeight = headerHeight.replace(/px/,''); // remove the 'px' from the previous variable so we can preform Math with it
var footerHeight = $("#footer").css("height");
footerHeight = footerHeight.replace(/px/,'');
var headerFooterHeight = parseFloat(headerHeight) + parseFloat(footerHeight); // add header and footer height
var elHeight = viewPortHeight - headerFooterHeight; // subtract that value from viewPortHeight
elHeight = (elHeight - 17) + "px"; // elHeight is how high the fixed element will be, add the 'px' back on
$("#right-inner").css('height',elHeight); // set the fixed elements height
$("#innerwrap").scroll(function () { // bind a scroll event to #innerwrap
var scrollY = $("#innerwrap").scrollTop(); // scrollY will equal the amount #innerwrap has scrolled each time it scrolls
$("#right-inner").css('top',scrollY); // set #right-inner top property
$("#right-inner").css({ 'overflow-y' : 'auto', 'overflow-x' : 'hidden' });
});
resizing = false;
},50); // setTimeout will run in 50 milliseconds
}
}
});
</script>
<![endif]-->
</body>
</html>
Here is a link for what i have and describes what i am trying to do… I hope its simple… http://www.mmageardirect.com.au/tmp/index.htm