Margin problems with sticky footer

HTML & CSS
1

I am struggling with margins in a 100% height layout with a sticky footer. You can see the layout here . The problem I have is to create a consistent top and bottom margin of 15px between the content (the green part with the text) and the photo above and the footer (the red part) below, no matter the amount of content. For the sticky footer I use the negative top margin method. I further more used Paul O’Bs method, where I use a absolute positioned div for the background of the content. But as you can see are the content and footer overlapping each other. I would like to have the same distance of 15px between the content and the footer as you can see above between the content and the photo. I tried to play with margin and padding but without the desired result. What should I adjust or change to make this work?

Thank you in advance!

2

Hi,

Use the negative top margin method and then makes the negative margin the height of the footer plus the 10px margin bottom on the wrapper. Soak up the space in the header and then you get no overlap.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body { height: 100%; }
body {
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	line-height: 110%;
	color: #FFF;
}
#bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -999;
}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#wrapper {
	min-height: 100%;
	margin:-110px auto 10px;
	font-size: .8125em;
	clear:both;
	position:relative;
	width: 1001px;
}
* html #wrapper { height:100% }
#container {
	width: 1001px;
	margin:0 auto;
	position: relative;
	z-index: 4;
	border-top:110px solid #fff;/* soak up sticky footer */
}
#header {
	width: 1001px;
	height: 85px;
	clear: both;
	position: relative;
	z-index: 15;
	background: #FF0000;
}
#header #logo {
	width: 315px;
	float: left;
	margin: 10px 0 0 25px;
}
#header #logo a {
	width: 315px;
	height: 120px;
	display: block;
	background: url(http://www.samanthaparadise.gr/images/site/logo.gif);
	text-transform: uppercase;
	text-indent: -999em;
}
#menu_background {
	width: 1001px;
	height: 110px;
	position: relative;
	z-index: 10;
	background: #FFF;
}
#menu {
	width: 981px;
	margin: 0 10px;
	overflow: hidden;
	clear: both;
}
#menu li {
	width:100px;
	line-height: 1.18;
	margin:5px 0 0 5px;
	position: relative;
	float:left;
	display:inline;
}
#menu li strong {
	white-space:nowrap;
	display:block;
	font-weight: normal;
	color: #3b3b39;
	font-size: 1.5em;
}
#menu li a {
	width: 100px;
	padding:5px 0 2px;
	float:left;
	position:relative;
	z-index:1;
	color:#a4a2a2;
	text-decoration:none;
	font-size:.7em;
	text-align:right;
}
#slider {
	width: 1001px;
	height: 295px;
	margin-bottom: 15px;
	background: url(http://www.samanthaparadise.gr/images/site/slide.jpg) 0 0 no-repeat;
}
#content {
	width: 915px;
	margin: 0 43px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#content h1 {
	padding: 25px;
	font-size: 1.23em;
	color: #FFF;
}
#content p { margin: 0 25px; }
#content p +p { margin: 25px 25px 0; }
.content {
	width: 915px;
	position: absolute;
	bottom: 0px;
	left: 43px;
	top: 605px;
	z-index: 0;
	background: url(http://www.samanthaparadise.gr/images/site/content.png) 0 100%;
}
#footer {
	width: 100%;
	height: 100px;
	clear: both;
}
.footer {
	width: 915px;
	height: 100px;
	margin: 0 auto;
	background: #FF0000;
}
.footer h1 {
	padding: 25px;
	font-size: 1.23em;
	color: #FFF;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#wrapper:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
</style>
</head>

<body>
<div id="wrapper">
		<div id="container">
				<div id="header">
						<div id="logo"><a href="index.cfm">#</a></div>
				</div>
				<div id="menu_background">
						<ul id="menu">
								<li><a href="#"><strong>homepage</strong></a></li>
								<li><a href="#"><strong>amenities</strong></a></li>
								<li><a href="#"><strong>rooms</strong></a></li>
						</ul>
				</div>
				<div id="slider"></div>
				<div id="content">
						<h1>Here start the content</h1>
						<p>In hac habitasse platea dictumst. Ut molestie, nisi sit amet porta elementum, felis turpis semper nibh, vel egestas leo lacus ultricies libero. Morbi rutrum justo id erat euismod pharetra iaculis non metus. Nunc cursus eros sit amet odio elementum at dictum tellus scelerisque.</p>
				</div>
		</div>
		<div class="content"></div>
</div>
<div id="footer">
		<div class="footer">
				<h1>Stick Footer</h1>
		</div>
</div>
<script type="text/javascript" src="http://www.samanthaparadise.gr/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://www.samanthaparadise.gr/js/background.js"></script>
</body>
</html>
3

Hi Paul. That works great. Thanks you so much for yet another sollution. :slight_smile:

4

What paul is trying to say (I think) is that you should probably be using padding instead of margin… good rule of thumb is padding’s lack of collapse makes it just more reliable, which is why where possible I avoid using it.

That said, your non-semantic markup, oddball use of heading tags (being you’re not in a html 5 document you shouldn’t have more than one h1, NOT that the second one even looks like it should be a heading), strong tags on elements that shouldn’t be receiving emphasis, and endless DIV for nothing all contribute to your problems - you’ve really over-thought your markup.

Of course I’m also hoping those are placeholder colors, since that white on blue is illegibly below color contrast minimums… and naturally there’s the jquery for nothing. (what is your intent with that, the massively bloated equivalent to background-size?) and the massive fixed width that’s useless on netbooks and other smaller devices.

Really for what it appears you are doing, there’s little reason for your HTML to be much more than this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="/theme/screen.css"
	media="screen,projection,tv"
/>
	
<title>
	Samantha Paradise
</title>

</head><body>

<div id="pageWrapper">
	
	<h1>
		Samantha <span>Paradise</span>
		<b></b>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="#">homepage</a></li>
		<li><a href="#">amenities</a></li>
		<li><a href="#">rooms</a></li>			
	</ul>
	
	<div id="banner"></div>
	
	<div id="content">
		<h2>Here start the content</h2>
		<p>
			In hac habitasse platea dictumst. Ut molestie, nisi sit amet porta elementum, felis turpis semper nibh, vel egestas leo lacus ultricies libero. Morbi rutrum justo id erat euismod pharetra iaculis non metus. Nunc cursus eros sit amet odio elementum at dictum tellus scelerisque.
		</p><p>
			In hac habitasse platea dictumst. In fermentum imperdiet aliquam. Vestibulum aliquet blandit venenatis. Integer sed tempus dui. Donec a ipsum sit amet odio lobortis dapibus. Donec ut porta lacus. Etiam ultrices laoreet condimentum.
		</p><p>
			Vivamus et libero ipsum, a bibendum neque. Morbi quis dapibus neque. Praesent vehicula lobortis magna adipiscing pharetra. Aliquam eget massa vitae est consequat consequat.
		</p>
	<!-- #content --></div>
	
<!-- #pageWrapper --></div>

<div id="footer">
	Stick Footer
<!-- #footer --></div>

</body></html>

Throwing out a whole slew of DIV you seem to have in there for little if any real purpose. If I have time later I’ll belt out the CSS I’d use with that.

5

Just wanted to say I didn’t forget about this, and am starting that CSS now.

Oh and Paul, that negative top margin on the topmost wrapper thing STILL doesn’t seem to work in IE9 or Opera for me. It’s like you didn’t even declare it.

6

Here’s what I came up with:
http://www.cutcodedown.com/for_others/donboe/site2/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/donboe/site2/

is unlocked for easy access to the bits and pieces.

Did end up putting two div back in, one to wrap that bizarre/inconsistent footer width, the other to add clearing to the content wrapper since that section is colored, so the bottom padding to make room for the footer looked funny – I also darkened the color so that the text was legible.

Still shows how all those extra DIV you had in the header weren’t necessary, and also shows how to create that header so that images off it gracefully degrades, and CSS off you have a proper heading.

… played games with that slide.jpg too… though that’s a massively bloated image that by itself even after recoding is larger than I’d allow for a single page on a site – If that’s a image of the place in question I’d try to incorporate it into the header instead of wasting so much space for nothing, then maybe have other photos as a sidebar type gallery instead of wasting people’s time and bandwidth on some massively unwieldy sideshow that forces you into a fixed width layout that destroys your chances at making an accessible layout.

… and on the subject of accessible I switched it to semi-fluid between 752 and 1001px… I’d actually go for 68em max-width, but your image isn’t really set up to handle that.

7

Just double checked and it works fine for me in opera and ie9 with no problem.

I have just noticed that the absolute overlay was in the wrong place but I never looked at that. Its fixed now in my above post.

You missed it out also and this would be the extra code to make it work on your version.


#pagewrapper{position:relative}
#content{position:relative;z-index:2;}
.content {
	position: absolute;
	bottom: 110px;
	left: 43px;
	right:43px;
	top: 485px;
	z-index: 0;
	background: url(http://www.samanthaparadise.gr/images/site/content.png) 0 100%;
}



	<div class="content"></div>
		<!-- #pageWrapper --></div>

Without it the white gap grows large on small pages which I think Doboe was trying to avoid. It could be done without the overlay anyway but just provide a background to the wrapper and rub it out where needed with a white background.

8

Absolute Overlay?!? What absolute overlay.

Didn’t see no content.png here, and why the *** would you apo something labelled .content?!? whatever that is, I’d suspect it’s one of those pesky ‘not viable for web deployment’ concepts… in fact since it had a fixed gap I assumed it wasn’t supposed to grow as it looked WORSE that way… It’s why I added the extra wrapper so that I could make room for the footer WITHOUT it doing that.

Though it’s hard to say since I saw nothing of the sort on the original.

What white gap? … and I’m not seeing anything changing on small pages… Oh wait, do you mean making the content area stretch down behind the footer? I assumed it wasn’t supposed to do that, or if it were, it wouldn’t have all the goofy oddball width paddings/differences that make it look like a broken layout to me.

9

The one dionboe mentioned in the initial post.

Didn’t see no content.png here, and why the *** would you apo something labelled .content?!?

You’ll have to ask donboe that :slight_smile:

whatever that is, I’d suspect it’s one of those pesky ‘not viable for web deployment’ concepts… in fact since it had a fixed gap I assumed it wasn’t supposed to grow as it looked WORSE that way… It’s why I added the extra wrapper so that I could make room for the footer WITHOUT it doing that.

Far from it I use the absolute overlay method all the time and its perfectly stable and useful when used correctly.

Though it’s hard to say since I saw nothing of the sort on the original.

The element is still in place the original link but as I said donboe has it in the wrong place and doesn’t work properly on tall pages. It should be relative to the wrapper and not the inner container.

What white gap? … and I’m not seeing anything changing on small pages… Oh wait, do you mean making the content area stretch down behind the footer? I assumed it wasn’t supposed to do that, or if it were, it wouldn’t have all the goofy oddball width paddings/differences that make it look like a broken layout to me.

The white gap that appears between the footer and the content background on tall pages. The footer in your layout becomes disjointed from the content background and looks silly on its own. The absolute overlay ensures that the background of the middle section always continues down to the footer (apart from the small gap that was a requisite of the initial post).

As I said it could be accomplished without an absolute overlay but then you would have to rub the background out where you want a white background.

10

I think that’s what threw me – in the original post was asking to maintain even margin gap between everything which it obviously wasn’t doing since in three of the four browsers I looked at it in were quite broken (I assumed what FF was showing me was what was desired) – I didn’t associate that with having the content area appearing to expand… still don’t from reading the thread up until you mentioned it.