Sticky footer with top margin

HTML & CSS
1

sorry if this has been asked many times before…

I’ve built many sticky footer pages before, but never with a top and bottom margin. I’ve attached an image of what i want it too look like.

What’s complicating matters is the wrapper ( the white background ) has a box shadow set.

Without a box-shadow I can think of a few ways to ‘fake’ margins by adding and element or border with a gray background.

Anyone have any ideas how I can make a sticky footer with margins with a box-shadow?

Thanks

2

Hi,

You could use my absolute overlay method combined with the sticky footer and do it like this:

http://www.pmob.co.uk/temp/sticky-footer-feb2013.htm


<!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=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
	margin:0;
	padding:0
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
}
/*Opera sticky footer Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#outer:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
h1, h2, p { padding:0 10px; }
#outer {
	width:960px;
	margin:auto;
	min-height:100%;
	margin-top:-90px;/* Footer - this drags the outer  up to the top of the monitor */
	text-align:left;
	clear:both;
	position:relative;
	z-index:1;
}
* html #outer { height:100% }
#footer {
	width:100%;
	min-width:960px;
	background:#000;
	color:#fff;
	clear:both;
	position:relative;
	z-index:2;
}
#footer {/* footer now sits at bottom of window*/
	height:90px;
	clear:both;
}
.inner {
	width:960px;
	margin:auto;
	position:relative;
	z-index:2;
}
#outer .inner { 
	padding:140px 20px 40px; /* make space*/
 width:920px;
}
.mid {
	background:#666;
	border-bottom:20px solid #ccc;
}
.bg1 {
	position:absolute;
	top:130px;
	margin-left:20px;
	bottom:40px;
	background:#aaa;
	width:920px;
	z-index:1;
	-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.9);
	-moz-box-shadow:    0px 5px 15px rgba(0, 0, 0, 0.9);
	box-shadow:         0px 5px 15px rgba(0, 0, 0, 0.9);
}
</style>
</head>
<body>
<div id="outer">
		<div class="inner">
				<h2>Sticky footer ie7+</h2>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</div>
		<!-- bg1 just hold the background and no content -->
		<div class="bg1"></div>
</div>
<div id="footer">
		<div class="inner">
				<p>Footer</p>
		</div>
</div>
</body>
</html>

The absolute overlay won’t work in IE6.

3

Thanks Paul!

So it’s .bg1 that gives the illusion of margins on the content area? And it occupies the correct vertical height with the ap top and bottom setting?

4

Yes that’s basically it. Only an absolute element can use top and bottom at the same time to describe its height. The absolute element holds no content but is just a background that will fit over the content. The actual content is kept in place with the padding on .inner.

If you don’t need to support IE7 then you could use:after to place the absolute element without any extraneous mark up.

5

last question. Why can’t .inner and .bg1 be the same div to both hold content and hold the margin illusion? in other words, why can’t those 2 divs be reduced to 1?

6

Because .inner doesn’t start part of the way down the page or finish part of the way up from the bottom. The .inner element is only as tall as the content it holds. It is not possible to make a static element start xxpx from the top and go to xxpx from the bottom.

The absolute element however can keep track with the page content as absolute elements can use top and bottom. The abs1 element keeps track with #outer which is the main container and has position:relative set as a stacking context. However you cannot use abs1 to hold content otherwise #outer would never grow and the content would overflow because absolute elements are removed from the flow. All we are doing is creating an overlay that hugs a position within #outer. It is #outer that grows. .inner just supplies some top and bottom padding to keep the text within the boundaries of the absolute overlay.

7

ahh, got it now!

i had to edit some code in firebug to see for myself, but totally makes sense, thanks!