3 replies [Last post]
cruizer
cruizer's picture
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-5
Joined: 2010-04-20
Posts: 2
Points: 3

Apparently I am asking for the impossible because this is forum #6 in the last two weeks. Barely a response, and definately not a solution.

I have a multi-column website with a sticky footer (see link below). As you see, I have created faux columns. Problem is, I need to have the left and right divs stretch all the way to the footer. In the left div, there will be clickable images located at the very bottom, by the footer. On the right div, there will be a watermarked image in the lower right corner, which the text can go right over is ot makes it that far. I have created this lower right watermark before (see here http://cgsart.com/artofthetable/index.html), but it was based off the container div, which had no background image to create faux columns.

Now you seem my delimma, I pray that you can help! If this can be done if this can be done some other way, I am all ears!

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

HTML

<!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

	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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What's stopping you simply

What's stopping you simply placing link and watermark position absolute to ?#container it's an illusion that they would be 'in' those areas you decribe but does that matter?

If you really need that left column to actually stretch have a look at an old layout series called the 'The One True Layout' very complex but has a section that describes how to place huge enormous padding bottom on a column greater than height would ever be then to use negative margin bottom to control height of column and overflow on parent, has some drawbacks but might work in your circumstances.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cruizer
cruizer's picture
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-5
Joined: 2010-04-20
Posts: 2
Points: 3

What you asked, Hugo, gave me

What you asked, Hugo, gave me an idea. Placing the images from the container div didn't work, all the other divs moved themselves based on the image locations.

But I was thinking about the process all wrong. I was always thinkuing from the top down. Then at lunch today it hit me, why not go form the ground up??

So I created added this code below and placed the divs in the footer parent. Made sure the z-index allowed the watermark to be above the contaier but below the content. Works great!! See updated link:

	.bottom	{
	position:absolute;
	width:100%;
	height:310px;
	bottom:0;
	margin-bottom:20px;
	background: url(images/abc_300.png) 98% 0% no-repeat;
	z-index: -1;
	}
 
	.leftpics	{
	position: absolute;
	width:200px;
	text-align:center;
	bottom:10px;
	}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looks fine, I would still

Looks fine, I would still perhaps ask does the watermark really need a div all it's own or can it not be simply added to an existing element and positioned 100% 100% if it were an element requiring specific background then add the background to the watermark and shorthand background decs to state image and background colour.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me