Need images in divs by stickyfooter

cruizer · Share | #1 (**permalink**) 04-20-2010, 12:09 AM

I have a multi-column website with a sticky footer (see link below). As you see, I have created faux columns. In the left div, I need clickable images located at the very bottom, by the footer. On the right div, I need a watermark image in the lower right corner, which the text can go right over if the content makes it that far. Both sets of images need to move with the footer if the content moved the footer down. I have created this lower right watermark before (see here http://cgsart.com/artofthetable/index.html), but that site was a singe column with a plain white background. Now you seem my delimma, I pray that you can help!

Site of which is in question: http://cgsart.com/test/

HTML

HTML Code:


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

<head>

<title>Events By Design</title>

<link href="styles.css" rel="stylesheet" type="text/css">

 

</head>

<body>

<div id="container">

<div id="nav">

</div><!-- CLOSES NAV -->

 

<div id="header">

</div><!-- CLOSES HEADER -->

<div id="body">

<div class="left">

I want the black in this area to stretch all the way to the footer!

</div><!-- CLOSES LEFT -->

<div class="right">

I want the white in this area to stretch all the way to the footer!

</div><!-- CLOSES RIGHT -->

 

<div style="clear:both"></div>

 

</div><!-- CLOSES BODY -->

 

   <div id="footer">

<div class="copyright">

<table width="100%">

<tr><td width="60%">

© 2010 Events By Design.  All rights reserved.

</td><td width="40%" align="right">

Website Created and Maintained By: <a href="http://www.cgsart.com" target="_new">CreativityForHire.com</a>

<td></tr>

</table>

</div><!-- CLOSES COPYRIGHT -->

 </div><!-- CLOSES FOOTER -->

 

</div><!-- CLOSES CONTAINER -->

 

 

</body>

</html>

CSS

Code:


 html, body {

    margin:0;

    padding:0;

    height:100%;

 background: url(images/events_bkgnd.gif) top center;

 }

 

 #container {

    min-height:100%;

    position:relative;

 left:50%;

 width:800px;

 margin:0 0 0 -400px;

 border-left: #705544 2px solid;

 border-right: #705544 2px solid;

 background: url(images/content_background.gif) top left;

 font: 13px tahoma,arial,helvetica;

 }

 #nav {

 height: 22px;

 background: #705544;

 }

 

 #header {

    min-height:125px;

 border-bottom: #705544 2px solid;

 background: #dfd4c3;

 }

 #body {

 min-height: 100%;

    padding-bottom:20px;   /* Height of the footer */

 }

 .left {

 position:relative;

 float:left;

 height:100%;

 padding: 10px;

 width: 180px;

 background: #000000;

 color: #ffffff;

 }

 .right {

 position:relative;

 float:right;

 padding: 10px;

 width: 580px;

 background: #ffffff

 }

 #footer {

    position:absolute;

    bottom:0;

    width:100%;

    height:20px;   /* Height of the footer */

 font-size:11px;

 color: #000000;

 border-bottom: #705544 2px solid;

 border-top: #705544 2px solid;

 background: #dfd4c3;

 }

 .copyright {

 position:relative;

 width:800px;

 font-size:11px;

 color: #000000;

 border-bottom: #000000 1px solid;

 }

Please Help. Thanks!

ark_lace · #2 (**permalink**) 04-20-2010, 03:54 AM

i think in the style sheet you should change this:

Code:

 
.right {

 position:relative;

 float:right;

 padding: 10px;

 width: 580px;

 background: #ffffff

 }

to this:

Code:

 
.right {

 background: #fff url(images/watermark.jpg) no-repeat bottom right;
 position:relative;

 float:right;

 padding: 10px;

 width: 580px;

 }

as far as getting the white and black to stretch all the way to the bottom, try adding breaks or <p> </p> several times because unless you specify a height for the div, it is just basing the height on the amount of text you enter.