Sticky footer problems, content containers wont expand.

[Historical Forums User]

[SOLVED]
I’m having some issues with utilizing a sticky footer. My content div is not expanding with the content within it. The content div appears to ignore its child divs and stops expanding beyond the footer height UNLESS i give the content div {height:100%;}. To make it simple I’ll just write out the major elements and leave out all the smaller details.

I should also mention that this site does display correctly in IE, Opera, or Chrome, I haven’t checked Safari, but it does work in Firefox. So When viewing the links at the bottom of this post, if its not too much trouble use Firefox.

My markup looks like this (sorry if its not semantically perfect)

Pagewrap is as it sounds, it wraps everything within the body. Chunk1 contains the very top header/banner, an “inner-banner” and my nav. Chunk2 contains two columns of content. Some elements within chunk 1 are using {margin: 0 auto;} to keep them center as they are 924px in width. Chunk 2 is also 924px wide, and is using {margin: 0 auto;} to stay center.

My CSS looks like this.

*{

margin: 0;

}



html,body,#pagewrap{

height:100%;

}



body > #pagewrap {

height: auto;

min-height: 100%;

}



#chunk1{

width:100%;

}



#chunk2{

padding-bottom: 140px;

}



.footer

{

background-color:#2b2c29;

text-align:center;

position:relative;

margin-top:-150px;

height:140px;

clear:both;

}

.clearfix:after

{

content:",";

display:block;

height:0;

clear:both;

visibility: hidden;

}

.clearfix:

{

display:inline-block;

}

* html .clearfix

{

height:1%;

}

.clearfix

{

display:block;

}

Heres a link to the page so you can see the problem. PAGE WITH PROBLEM

And heres a link to the page where I added {height: 100%;} in order to “hide” the error. PAGE WITH “FIX”

Ive tried a few “clear:both;” fixes and they don’t seem to work. And I originally had a different method of “sticky footer” but I had the same results…
Ive searched all over looking for solutions, hopefully someone can see some error, or issue which will “solve” this. Thanks ahead of time for any input!!

-Aaron-

[Senff]

Because the two columns in your “chunk2” DIV are positioned absolute, they’re taken out of the flow of the document, which basically means that they will have no impact whatsoever on other elements on the page. Hence, #chunk2 won’t expand with the two columns it has, because it doesn’t “see” them (being positioned absolute).

Get rid of the absolute positioning for those two columns and float them (either both left, or one left and one right). You may have to give #chunk2 overflow:hidden; for clearfix purposes as well.

[Historical Forums User]

It worked! Awesome! Your were spot on it was the absolute positioning messing it up.
Thanks a bunch!

[Author]

Posts