Grow your CSS skills. Land your dream job.

Relative positioning

  • # December 6, 2008 at 3:06 pm

    So I’m trying to add a footer to a website I’m working on. I’m using a method I found on fortyseven media (http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/). However, in order for this to work, I need to have my content div relatively positioned. Before I tried adding the footer, it was absolutely positioned, making it looks nice and pretty directly in the center of the page with no "white space" underneath the div. Now that I have it relatively positioned, it’s still centered and looking nice, but there’s a ton of space underneath the content div and above the footer div.

    I know why the space is there (since the element is relatively positioned, it left a gap where the element would normally be), but I do not want the space to be there. It’s really annoying and is unneeded.

    Is there a way to remove the gap at the bottom of my content div while still being able to keep it relatively positioned? :roll:

    Rob
    # December 6, 2008 at 3:59 pm

    Do you have a link to your site so we can have a look?

    # December 6, 2008 at 5:37 pm

    Well, I’ve figured out some of my problems. Now I’m just trying to fine tune things.

    For example, I can’t figure out why I’m still able to scroll on pages without a ton of content (like the Home, Performances, Auditions, and Outreach pages).

    Also, when the page isn’t maximized, the footer seems to stay the same size instead of shrinking with the browser (sorry if I didn’t explain that well… If you resize the browser I think you’ll understand what I mean).

    Here’s a link: http://www.mardeldance.com

    # December 6, 2008 at 9:21 pm

    Awesome response…

    Rob
    # December 7, 2008 at 2:29 pm

    wise words for a gold seller…

    Anyway, if you want to stop the little bit of scrolling, set your min-height of your wrap to 99.8% – if you want to get rid of the sroll bar all together, remove the html { overflow:scroll;} value.

    Resizing footer question: The same size as in width & height? or just one or the other?

    # December 7, 2008 at 5:26 pm

    Thanks for responding!

    I think I fixed my footer issue.

    I think I want to keep the overflow value so that when someone goes from a page with not enough content to fill their browser to a page full of content there are not any jumps due to the scrollbars. I might just change the min-height of the container like you said. If I did this, would it affect the footer?

    I also just want to know why there is there are scrollbars that are able to be moved on pages without a lot of content. Is it due to the overflow value?

    Rob
    # December 7, 2008 at 5:59 pm

    if you change the wrap to 99.8% high you wont see a change at all, other than you cant scroll on pages that shouldnt be scrolled on :)

    I think its because at 100% the wrapper just pushes the footer 2px or so too far down, or at least the browser thinks so. On FF you can get away with 99.9% but on IE7 you need it to be 99.8%… just one of those things I think…

    # December 7, 2008 at 6:08 pm

    Weird.

    Yeah, I just want to not be able to scroll on pages that you shouldn’t be able to scroll on to begin with.. It just annoys me :D

    Rob
    # December 7, 2008 at 6:26 pm

    yea things like that annoy the hell out of me too mate :) I feel your pain ;)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".