SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard GoldFire's Avatar
    Join Date
    Oct 2002
    Location
    Oklahoma City, OK
    Posts
    1,517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Horiz & Vert center DIV in the middle of the screen?

    I'm trying to make a page where I have a fixed height header and footer. I want the header at the top, the footer at the bottom, and a content box (div) to be centered vertically and horizontally in the gap between the header and footer. If the content is taller than that gap, it would push the footer down. I've made a jsfiddle with the code as I've got it so far, but it only works if the content is shorter than the gap, and it doesn't work at all in Internet Explorer (surprised?).

    Where I'm at so far: http://jsfiddle.net/VrfAU/4/

    If that wasn't very clear, hopefully these images make it obvious what I am trying to do.

    Small content:



    Large content:


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll need the basic routine from my sticky footer method here. Then it will need modifying to do what you want and I think something like this should work from IE6+ (with any luck).

    I've only knocked that up quickly so will need testing to see if it stands up to scrutiny

  3. #3
    SitePoint Wizard GoldFire's Avatar
    Join Date
    Oct 2002
    Location
    Oklahoma City, OK
    Posts
    1,517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You'll need the basic routine from my sticky footer method here. Then it will need modifying to do what you want and I think something like this should work from IE6+ (with any luck).

    I've only knocked that up quickly so will need testing to see if it stands up to scrutiny
    Thanks, that gets really close, but on Webkit browsers the footer sits just below the bottom of the screen.

    Edit: I've updated my jsfiddle with what you came up with, including a few small fixes; however, I still haven't figured out the issue with the footer being below the bottom of the window on webkit browsers. http://jsfiddle.net/UYpnC/4/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok that was due to the old opera fix which I've removed now and is working in Chrome and Safari. Newer versions of Opera should work without the previous fix.

    I've updated the example so refresh.

  5. #5
    SitePoint Wizard GoldFire's Avatar
    Join Date
    Oct 2002
    Location
    Oklahoma City, OK
    Posts
    1,517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing! Don't even want to think about how much time I spent trying to figure this out, you are a life saver. Thanks!


Bookmarks

Posting Permissions

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