View Full Version : Footer, Position, Overlap using position: relative

06-10-2010, 05:11 PM
I'm hoping someone will be able to help with this:

I want to move the footer up so that the main element of the site overlaps the top of the footer. In the footer I've tried adding top: -152px to achieve this, it works but because the footer position is relative as http://www.w3schools.com says "Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow." So there's an unwanted gap of 152px at the bottom of the site.

Is there some way to achieve that same effect without having the gap?

(I've experimented with different position values but they result in the footer moving to the top of the page.)

see http://www.cranihum.com/

Thank you


06-10-2010, 07:19 PM

You have the correct understanding on relative postioning. The way you want to do this is to use a negative margin-top on the footer which will push it upwards, just as a positive margin-top would push it downwards!


06-10-2010, 07:38 PM
Thank you Scriptet, that makes perfect sense but for some reason which I can't fathom, for any value I enter lower than -40px the footer doesn't move position.

It is very frustrating, as I imagine all coding problems must be if something you expect to work then doesn't!

I customising a word press theme and adding including a plug-in from spritely.net in my footer.

Any more pointers would be appreciated

Thank you


06-10-2010, 07:56 PM
in fact I can tell you why it's -40px specifically.

there's an item called content-bottom which 40px high, located above the footer. So a negative margin-top value won't go beyond the height of the content-bottom.

Any ideas what would prevent the footer moving higher than the content-bottom?

Using a negative top value worked but obviously caused the unwanted gap problem.

Thank you


Below is footer.php from WordPress

<?php global $options; foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }} ?>

</div><!-- /content-wrapper -->

<div id="content-bottom">
</div><!-- /content-bottom -->

</div><!-- /main-wrapper -->

<div id="footer" class="footer">
<div id="dragMe"></div>
<div id="hill1" class="footer"></div>
<div id="bird"></div>

<div class="footer-links-wrapper"></div>

<ul id="footer-links">

<?php wp_list_pages('title_li=&depth=1&sort_column=post_date'); ?>


<p class="footer-text"><?php echo $kv_footer_text;?></p>

</div><!-- /footer -->

<div id="bottomSlider"></div>

06-10-2010, 08:09 PM
I think it's because of the overflow:hidden; on the #footer is there any specific reason for this being there?

06-10-2010, 08:14 PM
yes there is. I have a jQueryUI slider, the background image is 2220px wide and it prevents the whole width being shown when using the slider. (a horizontal scroll bar appears).

Thank you again for the reply.

06-10-2010, 08:21 PM
Try adding overflow:auto; to #main-wrapper hopefully it should do the trick!

06-10-2010, 08:30 PM

That's brilliant, does exactly what I want, thank you so much :-)

What's the reason it works?

(a very relieved and happy) Will

06-10-2010, 08:46 PM
Glad it worked, I think it's basically it's because your main wrapper wasn't enclosing it's floats, therefore overflow:auto; triggers it to enclose them.

By default a parent won't enclose around it's floated children if they are not cleared properly, but adding a trigger like overflow:auto; or even floating the parent itself enables it to do this.

06-10-2010, 08:53 PM
Ah, I have so much to learn! thank you for the explanation and for spending the time to figure it out.


06-11-2010, 12:43 AM
I've just noticed that buttons at the bottom of the page, buttons in #main-wrapper which are within the overlap area of the footer, are not working.

Though the buttons in the footer are working, but I guess that's because they are part of the footer.

To see what I mean click on Blog and scroll to the bottom of the page and the button "Older Entries" is not clickable.

Is there a way to fix this?

Thank you

06-11-2010, 12:47 AM
Sorry I should have forseen this earlier I guess, but add:

position:relative; z-index:10;

To #main-wrapper

The z-index (http://www.w3schools.com/Css/pr_pos_z-index.asp) is the stacking order of elements, so setting it to a higher number makes it appear over the footer..

06-11-2010, 12:57 AM
it worked!

thank you again.

I did think about z-index as a solution, that's how I got the buttons to work in the footer. But I thought (incorrectly) that the main-wrapper would have a higher z-index as it was displaying over the footer.

The main-wrapper did not have a z-index value but a lot of the id's within the main-wrapper do.

Anyway I think I'm confusing myself now, time for bed, thank you again for solving my problem


06-11-2010, 01:03 AM
No problem!

But I thought (incorrectly) that the main-wrapper would have a higher z-index as it was displaying over the footer.

It wasn't appearing over the footer, but you're thinking is correct in that a higher z-index would cause this, it just had that visual appearance because you didn't have a background set on the footer to appear over the top.

For example to make it a lot clearer, if you just remove what we added position:relative; z-index:10; from #main-wrapper and add background:#000; to #footer you can see that the footer was appearing over the top of it!