Grow your CSS skills. Land your dream job.

CSS posistioning help

  • # August 1, 2010 at 9:29 am

    Created a template out of Photoshop with all Divs with absolute positioning. Need the footer to adjust and sit nicely below content and sidebar http://www.designcymru.com/help.jpg. Tried relative positioning but content ends up sitting beneath banner and sidebar beneath content. Looking for some help to figure this out please.

    # August 1, 2010 at 1:31 pm

    Why absolute positioning? Doesn’t really make sense in this case, with such a simple layout.

    The footer is doing exactly what you’ve asked it to do, be 990px from the top of it’s relative parent. If you provide a live link to the website, I’m sure we can provide a quicker solution.

    # August 1, 2010 at 1:51 pm

    Hi thanks for the response. I am running wordpress locally before I upload it live, I’ve provided the CSS and layout in the image I posted, is there any way you can help me from there please? If you ‘need’ the site live I’ll upload it but ideally would like to keep it local.

    # August 1, 2010 at 3:35 pm

    the only thing i can think of, aside from fixing the positioning all together, is to mess with z-indexing force the footer to move to the top :?:

    # August 1, 2010 at 5:41 pm

    So how can I change the positioning to be relative so that footer will adjust nicely with sidebar/content? Here’s a link to the site if it helps…. http://www.designcymru.com/totum/

    # August 2, 2010 at 12:07 am

    Yeah I don’t think absolute positioning will work for you at all here, for any area with dynamic content. Absolute positioning takes the element completely out of the document flow.

    # August 2, 2010 at 10:47 pm

    Thanks for the note, could you possibly direct me to an alternate route? I generated this template out of PS to the positioning was default.

    # August 3, 2010 at 1:17 pm

    The problem is that your content and sidebar area is position absolutely. This takes it out of the natural flow of the document, so unless your content is the same height every single post, your footer will be in different places depending on the height of your content (since it’s dynamic, it’ll be longer or shorter depending on the post).

    Instead of using absolute positioning, float your content left and float your sidebar right (or left too..that could work).

    Then set your footer to clear your content/sidebar.

    That will allow your footer to rest below your content.

    The main downside to absolute positioning is the problem you’re facing – footer doesn’t go directly underneath the positioned content.

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

You must be logged in to reply to this topic.

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