Solved

Footer below absolute postioned columns not staying down

Posted on 2009-06-29
6
431 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:Alicia St Rose
  • 2
  • 2
  • 2
6 Comments
 
LVL 5

Expert Comment

by:Krummelz
ID: 24742460
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
 
LVL 17

Expert Comment

by:selvol
ID: 24743303
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
 
LVL 7

Author Comment

by:Alicia St Rose
ID: 24750244
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 0 total points
ID: 24750274
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
 
LVL 5

Expert Comment

by:Krummelz
ID: 24751715
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
 
LVL 17

Expert Comment

by:selvol
ID: 24752328
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now