PDA

View Full Version : Combining vertical centring and sticky footer



GClockwork
Jul 14th, 2010, 11:38 PM
Hello people,

I posted this elsewhere (http://www.webdesignerforum.co.uk/topic/37661-sticky-footer-not-sticking-when-scrolling-due-to-pic-in-the-middle/) but a week later I'm still stuck; maybe you can help.

copy&pasting:

I'm working on a front page for a wee blog site. As I'm new to web design I've been throwing together some code from various tutorials -- the relevant bits here are about vertical centring and having a 'sticky' footer.

The structure is simple:
- a wide header pic at the top
- a square-ish div in the middle (this will contain a clickable image map etc.)
- a footer with some text

I need the squarish div (roughly) in the middle of the page vertically (as well as horizontally), except when the window is too small to do that. I also want the footer image to sit a small way down from the top window border, and this 'small way' should be proportional to overall window height (2%).

For vertical centering I had been using 'Method 4' from here (http://blog.themeforest.net/tutorials/vertical-centering-with-css/), but this wouldn't do as it uses position:absolute which I learn gets ignored by later divs. So I've tried to slot Method 3 (which is supposedly the best one anyway) into the wrapper area of the working wrapper/footer setup. See code below.

The footer works; but the percentage statements in #header and #floater do nothing. (Using fixed px values 'works' but of course that doesn't centre things vertically!) So what's the actual height of the parent div? Removing "height: auto !important;" from #wrapper (leaving the "height: 100%") has the percentage statements working fine -- but it breaks the footer!

I'm beginning to understand the individual parts but it seems that one thing always contradicts another :/

Any help much appreciated. Thanks.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Footer test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="abc_styles.css" type="text/css" media="all" />

</head>

<body>

<div id="wrapper">

<div id="header">
<img src="welcome.gif" alt="Welcome" height="60" width="664" >
</div>


<div id="floater">the floater</div>


<div id="map-view-container">map view container</div>


<div class="push">Push div</div>

</div>

<div class="footer">

<tt>
<p>What's in a footer?</p>
</tt>

</div>

</body>

</html>

CSS:

* {
margin: 0;
}

html, body {
background: cyan;
font-family: Georgia, Times, serifs;
height: 100%;
}

.clearboth {
clear: both;
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
margin: 0 auto -25px; /* bottom margin = - footer's height */
background: green;
}

.footer, .push {
height: 25px; /* .push must be the same height as .footer */
z-index: 101;
text-align: center;
background: yellow;
}

#map-view-container {
position: relative;
clear: both;
height: 470px;
width: 490px;
max-width: 470px;
min-width: 490px;
margin: 0 auto;
background: red;
}

#header {
position: relative;
height: 60px; width: 664px;
top: 2%; /* doesn't do anything :( */
margin: 0 auto 0;
z-index: 100;
background: blue;
}

#floater {
position: relative;
float: left;
height: 45%; /* doesn't do anything :( */
width: 200px; /* only for evaluation visualisation */
margin-bottom: -235px;
background: white;
}