Footer below absolute postioned columns not staying down

Hello,
I've absolute positioned two columns and have gotten the footer to stay down using the Inman's position clearing javascript (http://www.shauninman.com/plete/2006/05/clearance-position-inline-absolute)
It worked fine when the div#content_main was the tallest div. Then my client needed div#content_sub to be the tallest div and I simply changed the class of each div. Now it's not working. I can't figure out why?

Here's a link where it's working when div#content_main is the tallest div:

http://aliciastrose.com/clientsites/index.html

And here's the link where the div#content_sub is the tallest column and the footer isn't sticking below the columns:

http://teafireartproject.com


css:
 
html {
	text-align: center;
	background-color: #323133;
}
 
a:link, a:visited {
	color: #cc0000;
}
 
a:hover {
	color: #fff;
}
 
ul {
	margin: 0;
	padding: 0;
}
 
li {
	padding: 0;
	margin: 0;
}
 
 
body {
	position: relative;
	width: 898px;
	margin: 0 auto;
	color: #fff;
	font-family: Helvetica, sans-serif, Arial, sans-serif;
	font-size: 90%;
	text-align: left;
}
 
div#main_nav {
	position: absolute;
	top: -43px;
	right: 0;
	text-align: right;
	height: 43px;
	width: 898px;
	background: url(images/nav_background.gif) top left no-repeat;
}
 
ul#nav_shows {
	height: 43px;
	padding: 15px 35px 0 0;
	
}
 
ul#nav_shows li {
	display: inline;
	padding: 0 0 0 5px;
}
 
ul#nav_shows li a {
	font-size: 110%;
}
 
ul#nav_shows a {
	color: #fff;
}
 
ul#nav_shows a:hover {
	color: #cc0000;
} 
 
ul#nav_shows li.selected a  {
	color: #cc0000;
}
 
div#branding {
	text-indent: -9999px;
	background: url(images/branding.gif) center no-repeat #000;
	height: 128px;
	border: #cc0000 solid 1px;
	border-left: none;
	border-right: none;
	margin: 60px 0 0 0;
	 
}
 
div#content {
	position: relative;
	width: 898px;
	text-align: justify;
	background: url(images/body_filler.gif) repeat-y top center;
	padding-top: 1px;
}
 
div#content_main {
	left: 4%;
	width: 50%;
	padding: 1em 0;
	margin-top: 35px;
}
 
div#content_sub {
	left: 60%;
	width: 42%;
	text-align: justify;
	padding: 1em 0;
	margin-top: 35px;
}
 
 
ul#current li div.description {
	float: right;
	width: 192px;
	margin: -3px 50px 20px 0px;
}
 
#current img {
	float: left;
	width: 115px;
	margin: 0 5px 20px 0;
}
 
 
div#content_main h2 {
	text-indent: -9999px;
	background: url(images/gallery_highlights.gif) no-repeat #323133;
	height: 36px;
	margin: 0 0 1em 0;
}
	
div#content_sub h3 {
	text-indent: -9999px;
	background: url(images/current_show.gif) no-repeat #323133;
	height: 23px;
	width: 266px;
	margin: 8px 0 25px 0;
}
 
div#content_sub h4 {
	margin: 0 0 .5em 0;
}
 
div#content_sub p {
	font-size: 90%;
	margin: .75em 0;
}
 
div#content_main p {
	margin: .75em 0;
}
 
div#content_main p.top {
	margin-top: 1.5em;
}
 
div#content_sub a {
	font-size: 110%;
	text-decoration: underline;
	display: block;
	margin-top: -5px;
}
 
div#branding, div#navigation, div#site_info {
	width: 100%;
}
 
div#site_info {
	width: 898px;
	height: 43px;
	padding: 0;
	background: url(images/site_info_background.gif) bottom center no-repeat;
}
 
div#site_info p {
	text-align: right;
	font-size: 90%;
	padding: 10px 35px 0 0;
}
 
 
/* =si_clear_children*/
.pc,.sc { position: absolute; top: 0; left: 0;} 
.pc	{ width: 50%; left: 0; } 
.sc	{ width: 42%; left:60%;}
 
.clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
 
 
XHTML:
 
<div id="content" class="clear_children">
	<div id="content_main" class="pc">
	<h2>Gallery Highlights</h2>
	<p><a href="gallery_highlights/index.html"><img src="images/highlight_pix/highlight_med_01.jpg" alt="" /></a></p>
	<p class="top">On the night of November 13, 2008 fire swept through the hillsides above Santa Barbara, burning in its wake more than 200 homes. In its aftermath, as we searched through the rubble and the ashes for anything to salvage from among the emptiness and desolation, we were struck by the discovery of objects and artifacts unexpectedly transformed by the fire into pieces of art. Some abstract, others still preserving the form of those items that used to be a part of our lives, all emanating beauty and sadness, for their creation was born out of destruction. </p>
<p>These are the objects so far collected among the remains of the Tea Fire. This is an ongoing project and items are still being gathered. If you have anything you want to contribute towards the project please contact us. All objects will be tagged, photographed and stored until the show planned for November of 2009, the anniversary of the fire, after which they will all be returned. </p>
<p>During the exhibit, a selection of photographs and of the objects will be on display. We hope to create a space of reflection in which the community as a whole can share and remember that which was lost, and marvel at the power of creation of nature. </p>
<p>Please note that we are still looking for a space to host the exhibit, and that any donations would be appreciated. </p>
	<p><a href="gallery_highlights/index.html">view gallery</a></p>
	</div>
	<div id="content_sub" class="sc  cc_tallest">
		<h3>Current Slide Shows</h3>
		<ul id="current">
			<li><div class="description"><h4>354 East Mountain Dr.</h4>
                <p>Lorem ipsum dolor sit amet, aptent wisi penatibus vitae sed, a ut felis quisque inceptos turpis vestittbulum, egestas condimentum.</p>
				<p><a href="354_e_mountain_dr/index.html"><span  class="link">view gallery</span></a></p>
				</div>
				<p  class="pic"><a href="354_e_mountain_dr/index.html"><img src="images/e_mountain/354e_mountain_thumb01.jpg" alt="" /></a></p>
			</li>
            <li><div class="description"><h4> 352 East Mountain Dr.</h4>
				<p>Lorem ipsum dolor sit amet, aptent wisi penatibus vitae sed, a ut felis quisque inceptos turpis vestittbulum, egestas condimentum.</p>
				<p><a href="352_e_mountain_dr/index.html"><span  class="link">view gallery</span></a></p>
				</div>
				<p  class="pic"><a href="352_e_mountain_dr/index.html"><img src="images/e_mountain/e_mountain_thumb01.jpg" alt="" /></a></p>
			</li>
            <li><div class="description"><h4>231-350 East Mountain Dr.</h4>
				<p>Lorem ipsum dolor sit amet, aptent wisi penatibus vitae sed, a ut felis quisque inceptos turpis vestittbulum, egestas condimentum.</p>
				<p><a href="231_350_e_mountain_dr/index.html"><span  class="link">view gallery</span></a></p>
				</div>
				<p  class="pic"><a href="231_350_e_mountain_dr/index.html"><img src="images/e_mountain/245e_mountain_thumb01.jpg" alt="" /></a></p>
			</li>
            <li><div class="description"><h4>45 West Mountain Dr.</h4>
				<p>Lorem ipsum dolor sit amet, aptent wisi penatibus vitae sed, a ut felis quisque inceptos turpis vestittbulum, egestas condimentum.</p>
				<p><a href="45_w_mountain_dr/index.html"><span  class="link">view gallery</span></a></p>
				</div>
				<p  class="pic"><a href="45_w_mountain_dr/index.html"><img src="images/w_mountain/w_mountain_thumb01.jpg" alt="" /></a></p>
			</li>
			<li><div class="description"><h4>100-1325 West Mountain Dr.</h4>
				<p>Lorem ipsum dolor sit amet, aptent wisi penatibus vitae sed, a ut felis quisque inceptos turpis vestittbulum, egestas condimentum.</p>
				<p><a href="100_1325_w_mountain_dr/index.html"><span  class="link">view gallery</span></a></p>
				</div>
				<p class="pic"><a href="100_1325_w_mountain_dr/index.html"><img src="images/w_mountain/874w_mountain_thumb01.jpg"  alt="" /></a></p>
			</li>
			<li><div class="description"><h4>Other Locations</h4>
				<p>Lorem ipsum dolor sit amet, aptent wisi penatibus vitae sed, a ut felis quisque inceptos turpis vestittbulum, egestas condimentum.</p>
				<p><a href="other_locations/index.html"><span class="link">view gallery</span></a></p>
				</div>
				<p class="pic"><a href="other_locations/index.html"><img src="images/other/other_thumb01.jpg" alt="" /></a></p>
			</li>
		</ul>
	</div>
	</div><!-- end div#content -->
<div id="site_info">
	<p class="rights">All Rights Reserved, Tea Fire Art Project &#169; 2009</p>
</div>
	<script type="text/javascript" src="si-clear-children.js"></script>
	</body>
</html>
 
 
JAVASCRIPT:
 
/*--------------------------------------------------------------------------------
 SI.ClearChildren v1.0
 
 Instructions for use:
 
 0. Include the following rules in your CSS (IE Win 5 requires `clear_children` to 
	be display: inline; you can use the * html hack--just be sure to hide from IE 
	Mac):
 
 	.clear_children,.cc_tallest { position: relative; }
	.cc_tallest:after { content: ''; }
 
 1. Layout your elements using absolute positioning relative to a container with a 
	class of `clear_children` which contains only the absolutely positioned 
	elements (no other inline elements).
 
 2. This causes the containing element to collapse.
 
 3. Decide which contained element will be the deepest on the most occasions and 
	assign a class of `cc_tallest`. This will cause the containing element to 
	expand to the height of this element.
 
 4. Include this file.
 
 ---------------------------------------------------------------------------------*/
if (!SI) { var SI = new Object(); };
SI.ClearChildren =
{
	control			: null,
	watchInterval	: 50,
	height			: 0,
	initialize		: function()
	{
		// IE Mac chokes on this (width and height assignments in particular). Go fish.
		if (document.createElement && !(document.all && !window.print))
		{
			var c = document.createElement('div'), s = c.style;
			s.position		= 'fixed';
			s.top			= '0';
			s.visibility	= 'hidden';
			s.width			= '1.0em';
			s.height		= '1.0em';
			this.control = document.body.appendChild(c);
			this.height = 0;
			window.setInterval('SI.ClearChildren.monitor()', this.watchInterval);
		};
		this.clear();
	},
	
	monitor	: function()
	{
		var o = this.height;
		this.height = this.control.offsetHeight;
		if (o != this.height) { this.clear(); };
	},
	
	clear : function()
	{
		if (!document.getElementsByTagName && !document.all) { return; }
 
		var elems = (document.all) ? document.all : document.getElementsByTagName('*');
		for (var i = elems.length-1; i >= 0; i--)
		{
			var elem = elems[i];
			if (!elem.className.match(/\bclear_children\b/)) { continue; };
			var container = elem;
			var tallest;
			var maxHeight = 0;
			for (var j = 0; j < container.childNodes.length; j++)
			{
				var contained = container.childNodes[j];
				if (contained.nodeType == 1)
				{
					if (contained.offsetHeight > maxHeight)
					{
						maxHeight	= contained.offsetHeight;
						tallest		= contained;
					};
					contained.className = contained.className.replace(/\bcc_tallest\b/, '');
				};
			};
			// Add to the front of the existing classes to appease IE Mac. Save me Jeebus. 
			tallest.className = 'cc_tallest' + ((tallest.className == '') ? '' : ' ' + tallest.className);
		};
	}
};
 
// Just do it.
SI.ClearChildren.initialize();

Open in new window

LVL 9
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KrummelzCommented:
Simple. Just add this line to your CSS file:

#site_info
{
      clear:both;
}

Here is the tutorial you can look at:
http://www.subcide.com/tutorials/csslayout/page6.aspx
0
selvolCommented:
Try to drop the HTML class in the css.
Try this
a:link, a:visited {
color : #cc0000;
}
a:hover {
color : #fff;
}
ul {
margin : 0;
padding : 0;
}
li {
padding : 0;
margin : 0;
}
body {
 	text-align: center;
 	background-color: #323133;
position : relative;
width : 898px;
margin : 0 auto;
color : #fff;
font-family : Helvetica, sans-serif, Arial, sans-serif;
font-size : 90%;
text-align : left;
}
div#main_nav {
position : absolute;
top : -43px;
right : 0;
text-align : right;
height : 43px;
width : 898px;
background : url(images/nav_background.gif) no-repeat top left;
}
ul#nav_shows {
height : 43px;
padding : 15px 35px 0 0;
}
ul#nav_shows li {
display : inline;
padding : 0 0 0 5px;
}
ul#nav_shows li a {
font-size : 110%;
}
ul#nav_shows a {
color : #fff;
}
ul#nav_shows a:hover {
color : #cc0000;
}
ul#nav_shows li.selected a {
color : #cc0000;
}
div#branding {
text-indent : -9999px;
background : #000 url(images/branding.gif) no-repeat center;
height : 128px;
border : 1px solid #cc0000;
border-left : none;
border-right : none;
margin : 60px 0 0 0;
}
div#content {
position : relative;
width : 898px;
text-align : justify;
background : url(images/body_filler.gif) repeat-y top center;
padding-top : 1px;
}
div#content_main {
left : 4%;
width : 50%;
padding : 1em 0;
margin-top : 35px;
}
div#content_sub {
left : 60%;
width : 42%;
text-align : justify;
padding : 1em 0;
margin-top : 35px;
}
ul#current li div.description {
float : right;
width : 192px;
margin : -3px 50px 20px 0;
}
#current img {
float : left;
width : 115px;
margin : 0 5px 20px 0;
}
div#content_main h2 {
text-indent : -9999px;
background : #323133 url(images/gallery_highlights.gif) no-repeat;
height : 36px;
margin : 0 0 1em 0;
}
div#content_sub h3 {
text-indent : -9999px;
background : #323133 url(images/current_show.gif) no-repeat;
height : 23px;
width : 266px;
margin : 8px 0 25px 0;
}
div#content_sub h4 {
margin : 0 0 0.5em 0;
}
div#content_sub p {
font-size : 90%;
margin : 0.75em 0;
}
div#content_main p {
margin : 0.75em 0;
}
div#content_main p.top {
margin-top : 1.5em;
}
div#content_sub a {
font-size : 110%;
text-decoration : underline;
display : block;
margin-top : -5px;
}
div#branding, div#navigation, div#site_info {
width : 100%;
}
div#site_info {
width : 898px;
height : 43px;
padding : 0;
background : url(images/site_info_background.gif) no-repeat bottom center;
}
div#site_info p {
text-align : right;
font-size : 90%;
padding : 10px 35px 0 0;
}
.pc, .sc {
position : absolute;
top : 0;
left : 0;
}
.pc {
width : 50%;
left : 0;
}
.sc {
width : 42%;
left : 60%;
}
.clear_children, .cc_tallest {
position : relative;
}
* html .clear_children {
display : inline;
}
.cc_tallest:after {
content : '';
}  /* PREVENTS A REDRAW BUG IN SAFARI */

Open in new window

0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Hello,
Thanks for the responses.
@Krummelz:
I'm not floating the divs they are absolute positioned. So Clear Property won't work.

@selvol:
I tried the CSS you've supplied and nothing really changed.

Let me give more elaboration.
I'm using absolute positioning rather than floats for layout, referencing Andy Clarke's book Transcending CSS.
It worked splendidly when I had the main content as the tallest column, but once I tranferred the cc_tallest class to the sub content it isn't working.

I downloaded the files from Clarke's website and it works wonderfully, no matter which column gets the cc_tallest class. I even subbed my own content in the html and it worked.
Is there something I'm missing?
Clarke has 3 style sheets.
I don't like doing that. So I've got everything in one style sheet.
I noticed he had the div#site_info position: relative in the typography.css. That doesn't seem to work for either: The div#content_sub still spills beyond the border and the footer cuts across ON TOP of the images.
I've uploaded the Clarke files here:

Site:
http://aliciastrose.com/testing/clarke_files/proto.html
CSS:
http://aliciastrose.com/testing/clarke_files/layout.css
http://aliciastrose.com/testing/clarke_files/typography.css
http://aliciastrose.com/testing/clarke_files/colors.css

Nice clean markup and CSS. Why is his working and mine isn't?

A~
selvol-suggestion.png
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Hello,
Thanks for the responses.
@Krummelz:
I'm not floating the divs they are absolute positioned. So Clear Property won't work.

@selvol:
I tried the CSS you've supplied and nothing really changed.

Let me give more elaboration.
I'm using absolute positioning rather than floats for layout, referencing Andy Clarke's book Transcending CSS.
It worked splendidly when I had the main content as the tallest column, but once I tranferred the cc_tallest class to the sub content it isn't working.

I downloaded the files from Clarke's website and it works wonderfully, no matter which column gets the cc_tallest class. I even subbed my own content in the html and it worked.
Is there something I'm missing?
Clarke has 3 style sheets.
I don't like doing that. So I've got everything in one style sheet.
I noticed he had the div#site_info position: relative in the typography.css. That doesn't seem to work for either: The div#content_sub still spills beyond the border and the footer cuts across ON TOP of the images.
I've uploaded the Clarke files here:

Site:
http://aliciastrose.com/testing/clarke_files/proto.html
CSS:
http://aliciastrose.com/testing/clarke_files/layout.css
http://aliciastrose.com/testing/clarke_files/typography.css
http://aliciastrose.com/testing/clarke_files/colors.css

Nice clean markup and CSS. Why is his working and mine isn't?

A~
footer-position-relative.jpg
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
KrummelzCommented:
Two things..

Does your site still look the same in IE?

and have you tried adding some padding or a margin to the top of div#site_info; or to the bottom of your content_main / content_sub?
0
selvolCommented:
I honestly spend some time on this tonight.  For me and I speculate others. It is some what challenging to get into the authors mind. And rebuild the site/page from what is given.  

I did manage to get the  bottom at the bottom of the last image..

But the sides did not follow and the bottom only went 1/4 across.
I did this by Moving the </div>'s around.

Sort of like the diagram I am forced to Draw. Due to the Fact EE has a bug and I can not upload images.

YEs I tried "attached FIle".



Regards..........

Hopefully Krummelz sorted it out.....


Selvol
|          x |
|          x |
|          x |
|          x |
           x
        ____

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.