Literally pulling my hair out! on a deadline!

[origen]

Hi guys, another amazing footer-div-madness thread! I apologize in advance.

Everything was going fantastic until I ran into sticky footer issues. Once I solved those, It's now an issue of making my simple #content div stretch to meet the footer every time. I mean, 60&#37; of the time it works, but I'm at 1900x1200 and I don't think my "< /br>"solution is very cross-browser friendly, nor very intelligent.

I think i've just read too many tutorials on sticky footers that either my positioning settings are way off, or my HTML structure is helter-skelter.
In any event, my client is very demanding, and I'd like to resolve this issue ASAP.

TL;DR: The #content div will not stretch to meet the footer. Help! Can't post links as of yet..

Here's the HTML: hXXp://pastebin.com/HAWxpKR3 - forgot to edit out all the rollover code, whoops
Here's the CSS: hXXp://pastebin.com/qj7ABVRG

and the site in question: hXXp://pixelbloq.com/img/probalos.jpg

thanks in advance,

bloq

[ralph.m]

Hi origne. Welcome to SitePoint!

I'm in a rush, so can't look at your code, but here are some really handy links on how to do a good sticky footer:

http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

http://www.sitepoint.com/forums/show...66&postcount=3

http://www.sitepoint.com/forums/showthread.php?t=171943

http://www.sitepoint.com/forums/showthread.php?t=611825

http://www.search-this.com/2009/10/0...ticky-subject/

Hope that's of some use!

[origen]

Hi ralph, thanks for posting those. Afraid to say I've read most already...
This isn't so much a stick footer issue as it is that my content div will not stretch to meet the footer at the bottom of the viewport.

[RyanReese]

Can you post a link to the site in question? It makes everything much easier considering we can actually see colors and images and it makes debugging so much faster since we don't have to make an offline copy of your page to test on

[origen]

Sure, just replace the XX

hXXp://pixelbloq.com/web/ogilvy/html/

[Paul O'B]

Hi Welcome to Sitepoint

You have fallen into the usual 100&#37; height trap and the methods you are using are completely incorrect for what you want to achieve.

For example you have set your #content element to 100% high but an element can only base it's height on a parent that has a height defined. If the parent is auto height (i.e. height set by content) or if it only has a min-height applied then it cannot base it's height on anything and collapses to auto.

If by some chance the parent did have a set height then the layout would still be broken because you would now have an element inside a parent that was 100% high had a top margin of 61px and starts half way down the page to begin with.

That would mean your #content was now about 150% high and thus breaking out of the parent and breaking the layout. It would also means that real content inside #content could never grow pass the height set.

Suffice to say you cannot use 100% height in that way which is why we have a faq explaining the issue (see my sig for a link to the faqs).

You have one shot at 100% height and that is the first element on the page that has the min-height:100% applied. This is the only element that will stretch to the bottom and if you want a background to extend to the footer then you must use it on this element.

You can easily apply background colours to your header elements etc to rub out the bits you don't want to see at the top and to create the illusion that the content is starting some way down the page.

It is impossible to start an element half way down the page and then say "just go to the bottom" (unfortunately).

Use the main container for your background and just rub out the bits you want to be in another background colour by using the inner elements.

The faq also explains how to apply a sticky footer correctly because the method you are using is an old and broken method and won't work properly in ie7, ie8 and opera.

The sticky footer in the forum faq is the only one in the world that works in all those browsers (the original sticky footer was actually created here in the forums with my help around 2003 so we are very experienced with its problems here).

Also remove that clip rule from #content as it makes no sense and only applies to absolutely positioned elements anyway.

Without access to the images etc I couldn't see what the page was supposed to look like but this is a rough idea of what you need to do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="pixelbloq" />
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */

* {
    padding: 0;
    margin: 0;
    border: 0;
}
#main {
    padding-bottom: 100px;
}  /* must be same height as the footer */
html, body {
    padding:0;
    height:100%;
    margin:0;
}
body{
    background:#000 url(../img/bg_tile.gif);
}
#container {
    min-height:100%;
    position:relative;
    margin: auto;
    width: 915px;
    font-size: 62.5%;
    background: #D2D4D1;
}
* html #container{height:100%}
#header {
    background:#000;
    height: 175px;
    width: 915px;
    padding-top: 25px;
    text-align: left;
    position: relative;
}
#content {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    width: 915px;
    position: relative;
    overflow: auto;
    padding-top: 61px;
}
#content p {
    padding-right: 215px;
    padding-bottom: 50px;
    padding-left: 50px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #000;
    text-decoration: none;
    word-spacing: 0.1em;
    text-align: left;
    letter-spacing: 0.05em;
    line-height: 1.2em;
    font-size: 1.1em;
}
#navbar {
    height: 41px;
    width: 915px;
    position: absolute;
    background:green;
}
#langBar {
    height: 20px;
    width: 915px;
    position: absolute;
    margin-top: 41px;
}
#footer {
    position:relative;
    height:100px;
    width: 915px;
    clear: both;
    margin-top: -100px;
    margin-right: auto;
    margin-left: auto;
    background:#000;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
h1, h2, p {
    padding:0 10px;
}
#container:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}



</style>
</head>
<body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
<div id="container">
    <div id="main" class="clearfix">
        <div id="header"></div>
        <div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="../img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="../img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="../img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="../img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="../img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="../img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="../img/nav_contact.jpg" alt="Contact O Coiffure &amp; Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
        <div id="langBar"> <img src="../img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
            <map name="language" id="language">
                <area shape="rect" coords="846,2,913,20" href="languageChange" />
            </map>
        </div>
        <div id="content">
            <p>THIS IS THE DIV CONTENT THAT WON'T STRETCH! </p>
        </div>
    </div>
</div>
<div id="footer"><img src="../img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
    <map name="Map" id="Map">
        <area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure &amp; Spa" />
        <area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
        <area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
        <area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure &amp; Spa" />
        <area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
    </map>
</div>
</body>
</html>

Hope that helps

[Paul O'B]

Ok I see you posted a link

Here it is with your images in place.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="pixelbloq" />
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* {
    padding: 0;
    margin: 0;
    border: 0;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100&#37;;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
#main {
    padding-bottom: 100px;
}  /* must be same height as the footer */
html, body {
    padding:0;
    height:100%;
    margin:0;
}
body {
    background: url(http://pixelbloq.com/web/ogilvy/img/bg_tile.gif);
}
#container {
    min-height:100%;
    margin: auto;
    width: 915px;
    font-size: 62.5%;
    background:#D2D4D1;
}
* html #container {
    height:100%
}
#header {
    background:#000 url(http://pixelbloq.com/web/ogilvy/img/main_header.png) no-repeat 0 25px;
    height: 175px;
    width: 915px;
    padding-top: 25px;
    text-align: left;
}
#content {
    margin: auto;
    text-align: left;
    width: 915px;
    overflow: auto;
    position: relative;
}
#content p {
    padding-right: 215px;
    padding-bottom: 50px;
    padding-left: 50px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #000;
    text-decoration: none;
    word-spacing: 0.1em;
    text-align: left;
    letter-spacing: 0.05em;
    line-height: 1.2em;
    font-size: 1.1em;
}
#navbar {
    height: 41px;
    width: 915px;
}
#langBar {
    height: 20px;
    width: 915px;
}
#footer {
    height:100px;
    width: 915px;
    clear: both;
    margin-top: -100px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background:#191a18;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */
</style>
</head>
<body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
<div id="container">
    <div id="main" class="clearfix">
        <div id="header"></div>
        <div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_contact.jpg" alt="Contact O Coiffure &amp; Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
        <div id="langBar"> <img src="http://pixelbloq.com/web/ogilvy/img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
            <map name="language" id="language">
                <area shape="rect" coords="846,2,913,20" href="languageChange" />
            </map>
        </div>
        <div id="content">
            <p>O Coiffure & Spa was created in 1981 to provide a foundation for the advancement of beauty, therapy, and holistic body treatment in the heart of Montreal. Our goal is to provide sanctuary and relaxation, a departure from the frenzy of urbanized life.</p>
            <p>Through this, O Coiffure & Spa interface and facilitate professional service with a complete and nurturing environment. In synthesizing the ideals of beauty, wellness, and relaxation we afford our customers the highest levels of satisfaction. O Coiffure and Spa strives to eliminate the traditional barriers between client and service by emphasizing the importance of establishing respectful and sustainable bonds.</p>
            <p>We at O Coiffure & Spa strictly adhere to wholly transparent and straightforward business practices. As each client is unique, so is our approach to treatment – our professional staff uses products of the highest quality to ensure the development of personalized programs, catering not only to immediate needs, but also promoting health of body and mind in the long-term.</p>
            <div id="spacemain"></div>
            </p>
        </div>
    </div>
</div>
<div id="footer"><img src="http://pixelbloq.com/web/ogilvy/img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
    <map name="Map" id="Map">
        <area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure &amp; Spa" />
        <area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
        <area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
        <area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure &amp; Spa" />
        <area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
    </map>
</div>
</body>
</html>

[origen]

I could kiss you I'm so relieved...thanks a bunch. Big love.

I just replaced the colors you set with my bg tile and voila. I had a feeling it was the 100% issue, especially in getting something midway down the screen to extend infinitely (impossible). That was why I was fiddling with positioning (relative and abs), ergo the clip.

Onto new things! do you recommend using a flash text replacer for custom font headings (I'm fairly comfortable with flash), or just exporting a .png for each one? If i choose the latter, do I define a css for each heading, or just make a generalized one, e.g. '.imgh24'

[Paul O'B]

Onto new things! do you recommend using a flash text replacer for custom font headings (I'm fairly comfortable with flash), or just exporting a .png for each one? If i choose the latter, do I define a css for each heading, or just make a generalized one, e.g. '.imgh24'

I prefer plain text but then I'm not a graphic designer

Sifr or cufon are ok.

If you want to use pngs then make sure you have some replacement text in the html for screen readers and the like to make sense of it.

[origen]

PROPER DEMO LINK IN POST BELOW

I've decided to forgo the flash\js text replacement and just use PNG. What are the drawbacks you mention of using png over gif for display text?

Anyway, new problem.

I'm trying to add a little flavour to the bottom of the page, and getting an image to sink to the bottom of my content div down to the footer (a sticky image?) I've read things on getting img content to the bottom of a div, but nothing seems to explain it in the context of a site using a sticky footer.

imageWrapper and bottomImage are the two new divs that aren't playing well with the footer. Yet again I think it's a positioning problem mixed in with margin, or perhaps it isn't possible at all?



HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>O Coiffure & Spa :: Montreal's Finest Urban Spa and Salon</title>
	<meta http-equiv="Content-Language" content="en-us" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta name="O Coiffure & Spa, " content="Description" />
	<meta name="O Coiffure & Spa, O, Coiffure, Spa, Montreal, Ogilvy, Salon, Downtown" content="Keywords" />
	<meta name="author" content="pixelbloq" />
 
 
 
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
 
 
 
 
 
<body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
<div id="container">
<div id="main" class="clearfix">
        <div id="header"><img src="../img/main_header.png" width="915" height="175" alt="O Coiffure &amp; Spa" longdesc="http://ocoiffureandspa.com" /></div>
 
        <div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="../img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="../img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="../img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="../img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="../img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="../img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="../img/nav_contact.jpg" alt="Contact O Coiffure &amp; Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
 
        <div id="langBar"> <img src="../img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
            <map name="language" id="language">
                <area shape="rect" coords="846,2,913,20" href="languageChange" />
            </map>
        </div>
 
        <div id="content">
        	<div id="h1img"></div>
          <p>O Coiffure & Spa was created in 1981 to provide a foundation for the advancement of beauty, therapy, and holistic body treatment in the heart of Montreal. Our goal is to provide sanctuary and relaxation, a departure from the frenzy of urbanized life.<br />
<br />
 
Through this, O Coiffure & Spa interface and facilitate professional service with a complete and nurturing environment. In synthesizing the ideals of beauty, wellness, and relaxation we afford our customers the highest levels of satisfaction. O Coiffure and Spa strives to eliminate the traditional barriers between client and service by emphasizing the importance of establishing respectful and sustainable bonds.<br />
<br />
 
We at O Coiffure & Spa strictly adhere to wholly transparent and straightforward business practices. As each client is unique, so is our approach to treatment – our professional staff uses products of the highest quality to ensure the development of personalized programs, catering not only to immediate needs, but also promoting health of body and mind in the long-term.<br />
<br /> 
 
 
 
</p>
<div id="imageWrapper">
   <img src="../img/footer_woman2.png" width="915" height="210" id="bottomImage" alt="woman" />
   </div>
 
 
        </div> <!--end content div-->
    </div> <!--end main div-->
</div> <!--end container div-->
 
<div id="footer"><img src="../img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map">
        <area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure &amp; Spa" />
        <area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
        <area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
        <area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure &amp; Spa" />
        <area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
    </map>
</div>
 
</body>
 
</html>

and css:

/* CSS Document */
 
* {
    padding: 0;
    margin: 0;
    border: 0;
}
#main {
	padding-bottom: 100px;
}  /* must be same height as the footer */
html, body {
    padding:0;
    height:100%;
    margin:0;
}
body{
	background-color: #000;
	background-image: url(../img/bg_tile.gif);
}
#container {
	min-height:100%;
	position:relative;
	margin: auto;
	width: 915px;
	font-size: 62.5%;
	background-color: #E7EEE6;
}
* html #container{height:100%}
#header {
	height: 175px;
	width: 915px;
	padding-top: 25px;
	text-align: left;
	position: relative;
	background-image: url(../img/bg_tile.gif);
}
 
#navbar {
	height: 41px;
	width: 915px;
	position: absolute;
	z-index: 2;
}
#langBar {
    height: 20px;
    width: 915px;
    position: absolute;
    margin-top: 41px;
}
#content {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    width: 915px;
    position: relative;
    overflow: auto;
    padding-top: 61px;
}
#content p {
	padding-right: 215px;
	padding-bottom: 50px;
	padding-left: 50px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: left;
	letter-spacing: 0.05em;
	line-height: 1.25em;
	font-size: 1.1em;
}
#h1img {
	background-image: url(../img/headers/philosophy.png);
	height: 26px;
	width: 273px;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 50px;
}
 
#imageWrapper {
	position: relative;
} /* height is for display purposes only */
#bottomImage {
	position: absolute;
	bottom: 0;
} 
 
#footer {
	position:relative;
	height:100px;
	width: 915px;
	clear: both;
	margin-top: -100px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../img/bg_tile.gif);
}
 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
h1, h2, p {
 
}
#container:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

thanks in advance, again!

[origen]

and here's the demo link: http://pixelbloq.com/web/ogilvy/test/html/

clarification: image i'm referring to is footer_woman2.png

[Erik J]

..., and getting an image to sink to the bottom of my content div down to the footer (a sticky image?) I've read things on getting img content to the bottom of a div, but nothing seems to explain it in the context of a site using a sticky footer.

imageWrapper and bottomImage are the two new divs that aren't playing well with the footer. Yet again I think it's a positioning problem mixed in with margin, or perhaps it isn't possible at all?
...

The AP image would rather move to be last in code inside the block it is positioned in.

      </div> <!--end content div-->
    </div> <!--end main div-->
  <div id="imageWrapper">
    <img src="../img/footer_woman2.png" id="bottomImage" alt="woman" height="210" width="915">
  </div>
</div> <!--end container div-->

Css changes:

#imageWrapper {
	position: absolute;
	bottom: 100px;
}
/*
#bottomImage { /* remove this */
	position: absolute;
	bottom: 0;
}
*/

[origen]

mmmmmmmm....yummy. a million thanks, my golden friend.