Pesky Footer

[allenc]

First I would like to say this community is great and I hope I can add to it in the near future as I become more skilled in CSS.

Until that please help me with a nagging footer alignment problem -_-

on peerbenchmarking.com the footer will overlap other page elements for some reason I cant get it to respect the heights of both the main content or sidebar. I have tried clearing the floats re ordering the structure of the page and a host of other ideas and am about 2 more failures away from tabling it up… Any help would be great

[TheDoc]

“This webpage is not available”

[Johnnyb]

I’m not really sure I’m seeing your issue, but trying adding ‘overflow: hidden’ to #content. Also, you had a typo in your link in this post – missed the ‘h’ out of bench.

[allenc]

Sorry about the link thing here is a specific page where it happens. http://www.peerbenchmarking.com/money-back-guarantee/ you will notice on pages where the content is rather long it is pushed down… Thanks again

[tobeeornot]

Have you used clearfix?

https://css-tricks.com/snippets/css/clear-fix/

[allenc]

Doesnt seem to select it when I do class=”footer clearfix” and if I wrap it in a div with the class=”clearfix” i get the css selcted but that doesnt solve the issue

[tobeeornot]

might be best if you post the code

[chrisburton]

add it to the sidebar

[allenc]

No luck in the sidebar either.

Whats the proper way to post the code and do you need all the CSS or what? Im a noob here

[chrisburton]

wait, wait. Why are you floating the sidebar to the left? Should be floated to the right.

[allenc]

Im pretty sure that was to try and fix it some time ago floated left no change.

[chrisburton]

Keep it floated right.

In your html, add a class of clearfix to the sidebar.

In your CSS stylesheet add this:

.clearfix:before,

.clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; } 

[allenc]

Done no luck.

Could this be caused by a separate div in the footer and applying clearfix to that div which ever it may be would solve the issue?

[chrisburton]

@allenc

the clearfix:after should clear the float after the sidebar. I’m not sure what the cause is at this point.

Edit: Remove the clearfix div and the break div before and after the footer and the css that goes with it. You’re actually not supposed to wrap the footer with these. Shouldn’t make a difference in the end result, though.

[chrisburton]

@wolfcry911 – http://i51.tinypic.com/21dj22p.png on Chrome

(disregard the lower bulb image)

[Author]

Posts