CSS Forum

**cruizer** · 04-20-2010, 02:56 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!

**LadynRed** · 04-20-2010, 03:33 PM

I would suggest putting in another "wrapper" div inside your container, but below your left and right columns. Put your watermarked image for the right side in as a background and use the right and bottom properties to put it down where you want it.

Looking at your setup, I would simplify it by using margin: 0 auto to center instead of the negative margins and then use positioning sparingly. This will also keep you from running afoul of IE7's positioning bugs.