FooterStickAlt related issue

**Linus van Pelt** · Sep 20, 2007 16:31

Hello all,
I'm playing around with Cameron Adam's FooterStickAlt technique and came across an issue I can't seem to get around.

First, it's important to mention that I have no problems getting a footer to "stick" in my trials. That's not my problem at all. My problem is the way Cameron has presented his body background image slice in his example is different than the intentions I'll be having when I begin my site layout.

Here's his: http://www.themaninblue.com/experime...mple_short.htm

I've put together a quick test page to illustrate the difficulty I'm having and my intentions. I'll post the code below.

It appears that the image background in his content area is actually coming from a repeat-y slice in his document body. In my application that wouldn't be the case. I need to have my "main" div container (which holds a floated content container and a floated column) stretch down to the top of the sticky footer regardless if content (or child containers) are forcing it to do so.... if that makes sense?

In any event, if you have the inclination to do so, please check out the test example illustrating the problem I'm having.

Cheers!

Linus

**Linus van Pelt** · Sep 20, 2007 16:32

Code:

<!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" xml:lang="en" lang="en">
<head>
<title></title>

<style type="text/css" media="screen, projection">
* {
    margin: 0;
    padding: 0;
}
html, body {	
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	font-family: Georgia, "Lucida Sans Unicode", Verdana, sans-serif;	
	font-size: 14px;
	color: #333333;
}
div#wrap {
	width: 776px;
	margin: 0 auto;
	padding: 0;
	min-height: 100%;
}
* html #wrap {
	height: 100%;
}

div#header {
	height: 75px;
	background-color: #555555;
}

div#main {
	background-color: #cccccc;
	padding: 20px;
}
div#contentLeft {
	float: left;
	width: 500px;
	padding: 20px;
	background-color: white;
}
div#sidebarRight {
	float: right;
	width: 140px;
	padding: 20px;
	background-color: white;
}
p {margin-bottom: 15px;}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
* html .clearfix {height: 1%;}      

* html div#nonFooter {height: 100%;}
* html div#footer {margin-top: -40px;}	/* IE hack  */
html {height: 100%;}
body {height: 100%;}
div#nonFooter {position: relative; min-height: 100%;}
 
div#footer {
	position: relative;
	clear: both;
	width: 776px;
	height: 40px;
	margin: -40px auto 0 auto;
	background-color: #555555;
}
</style>
</head>
<body>

<div id="wrap">
<div id="nonFooter">

	<div id="header"></div> 
	
	<div id="main" class="clearfix">
	
		<div id="contentLeft">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
			ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
			massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
			Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
			ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
			Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
			sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
			magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
			nunc nec augue.</p>

			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
			ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
			massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
			Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
			ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
			Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
			sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
			magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
			nunc nec augue.</p>
		</div>
		<div id="sidebarRight">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
		</div>
		
	</div>	
		
</div>
</div> 

<div id="footer"></div>

</body> 
</html>

**Karpie** · Sep 20, 2007 18:34

I don't really see where the 'problem' is... I had no problem getting footerStickAlt to work on the last website I designed, it's just a case of making all of your html, body, and non-footer styles have height: 100% (and a star hack for IE).

If their heights are 100%, they'll hold all your floating elements no probs, and still stretch down to the bottom of the browser.

**Linus van Pelt** · Sep 20, 2007 19:39

Thank you for your reply. As I stated, I have no problem with getting the footer to stick at all. I suppose it's better stated that my issue is getting <div id="main"> to stick to the top of the footer (that's using footerStickAlt).

I've added height: 100% to div#main in my css as well as the star hack, but it doesn't seem to make a difference. And again, Cameron is achieving this by setting his body with a repeat-y background image which fills that space in the content area. I need to do it with div#main.

Here's a link to the test page with the addition of height: 100%; on #main as you suggested. http://www.freewebs.com/linusvp/ Notice that the grey main content container that's holding the 2 floated content containers is not stretching down to the footer.

Perhaps I'm missing something obvious here?

Thanks in advance for any further insight.

Cheers
Linus

**all4nerds** · Sep 21, 2007 02:59

Hello

Yes only one 1 container can be 100% high , the outer wrapper

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>

	<style type="text/css" media="screen, projection">
	* {margin: 0;padding: 0;}

	html,body{height:100%;}

	body{
	background-color: #f9f9f9;
	font-family: Georgia, "Lucida Sans Unicode", Verdana, sans-serif;	
	font-size: 14px;
	color: #333333;
	}
	#wrap,#footer{width:776px;margin: 0 auto;}
	
	#wrap{
	margin-top:-40px;
	background:#cccccc;
	min-height: 100%;
	}
	* html #wrap {height: 100%;}

	#header{height:85px;background:#555555;border-top:40px solid #000000;}

	#contentLeft,#sidebarRight{padding:20px;background: white;float:left;margin:20px 0 20px 20px;display:inline;}
	
	#contentLeft{width:496px;}
	#sidebarRight{width:140px;}
	
	p{margin-bottom: 15px;}

	.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
	* html .clearfix{height: 1%;}
 
	#footer{
	background:#555555;
	height:40px;
	}
</style>
</head>
<body>

<div id="wrap" class="clearfix">

<div id="header"></div> 

<div id="contentLeft">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
nunc nec augue.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
nunc nec augue.</p>
</div>

<div id="sidebarRight">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
</div>

</div> 

<div id="footer"></div>

</body> 
</html>

**Linus van Pelt** · Sep 21, 2007 09:34

Ahh... ok, that makes sense. Thank you kindly for your reply. I did indeed have it working in the test example by setting the bg color on the wrapper, but it wasn't suitable. Let me be a bit more specific as to my need of having that main container stretch to the footer. I apologize that my test example didn't illustrate this. I was just trying to get info on getting more than one element to work at 100% height (ie: #wrap/#nonFooter & #main).

In the actual graphical design mockup, there is the header followed by a transparent space that contains a horizontal nav & search (where you just see the grey body in the background).

Then begins a parent container (#main) that that is white (holding the two floated content containers). This main parent container has rounded corners at the top and stretches straight down hitting a footer.

So my intention was to leave the #wrap transparent and set bg images for the #main container to achieve this. Apparently, this isn't possible.

Any ideas as to a workaround? Again, I thank you for insight.

Linus

**Linus van Pelt** · Sep 21, 2007 11:34

Just doing some toying around here. All4nerds, it's interesting how you modified Cameron's technique - there's no nonfooter? What's the deal with the header's border top?

Anyhow, I've come up with a workaround, but I'm not sure how sound it is. Semantically it's illogical and from an accessibility standpoint, probably no good.

Anyhow, it would be to nest an absolutely positioned div (or multiple divs to achieve the rounded corner effect) inside the wrapper which would act as the background of the content area below the nav. Obviously, I've set the 'top' position to show up just below the nav. And set left, right, and bottom to 0. I've done this in another test example and it seems to work; however, IE 6 doesn't seem to like the idea too much.

http://www.freewebs.com/linusvp/stickyfootertest3.htm

Anyway to get IE to work with this method? Or perhaps a workaround I'm missing?

Cheers!
Linus

**all4nerds** · Sep 21, 2007 12:55

Hello

Footers can be don 5 or more ways, i did not modify , just used my own way , that gets the junk on top out of the view/screen with a margin top on the wrapper, the header is moved to it's correct place with a border

Maybe a simple image what you want to achieve with the rounded corners, the full design Please, so that we know what we are talking/coding about

User Tag List

Thread: FooterStickAlt related issue

Thread Tools

Display

FooterStickAlt related issue

Here's the example markup...

Bookmarks

Bookmarks

Posting Permissions