www.webdeveloper.com
Results 1 to 3 of 3

Thread: Div Positioning Problem

  1. #1
    Join Date
    Sep 2005
    Location
    Oklahoma, USA
    Posts
    6

    Unhappy Div Positioning Problem

    I have this website that I am having a problem with positioning my footer div. I would like it to stay at the bottom of the website, regardless of the content div's length. Doing this with server side scripting is easy. But when this website goes live, I am not going to have access to server side scripting.

    When I take the footer div out of sercoWrapper div/class, the footer appears behind my header div. When I place the footer div back inside sercoWrapper div/class and but below the content div, it renders in the middle of the content div.

    Can someone point out my mistake??

    Tony

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    Basically everything that you have as absolute positioned does not have a height even though at one point you are setting it to 100% it still does not have a height because the parent element above it is also set to absolute and does not have a height.

    Start with changing all your elements back towards relative instead of absolute and rip out the top, right, bottom, left css definitions.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    Good advice. The worst thing to do as a newcomer to CSS is to position everything. What you want to do as a newcomer, is position NOTHING. Only when you really understand what positioning is and how to use it should you start to use position:relative and position: absolute (position:static is the default and is the only one that anyone new to CSS should use, as stated above).

    All that being said, after you do what infinityspiral suggested, this demo will help you - http://ryanfait.com/sticky-footer/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles