SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height AND centered horizontally?

    I'm trying to just get a div tag to be 100% height and centered horizontally. I've given the html the necessary 100% height for it to work.

    The problem I see is this:

    In order to have it horizontally centered, it needs to be position: relative. So here's the CSS I use to try to accomplish this along with the 100% height:

    body { height: 100%; padding: 0; }

    #centered { background-color: #f4f4f4; position: relative; width: 500px; height: 100%; visibility: visible; margin: 0 auto; }
    But alas! Although centered, it isn't 100% height. So next I change the position to absolute:

    body { height: 100%; padding: 0; }

    #centered { background-color: #f4f4f4; position: absolute; width: 500px; height: 100%; visibility: visible; margin: 0 auto; }
    Now it's at 100% height sure enough, but it aligns to the left of the screen.

    Is there any way to accomplish this? Thanks!

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Befor I dive into a workaround, can I ask why you need the div to be 100%? Is it for a particular effect you're doing?

    Anyway, here's what has worked for me:

    Code:
    body, html {
    height: 100%;
    }
    
    body {
    text-align: center;
    }
    
    div {
    text-align: left;
    }
    
    html>body #centered {
    height: auto;
    }
    
    #centered {
    width: 755px;
    height: 100%; 
    min-height: 100%; 
    margin: 0 auto; 
    }
    Be aware that this will not work in Safari or IE5.2 Mac and I don't think there is a solution for them.

  3. #3
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mstwntd
    Befor I dive into a workaround, can I ask why you need the div to be 100%?
    Thanks, that does the trick.

    I just got GoLive CS2 (I'm migrating from 4 yrs. Dreamweaver experience) and I'm just playing around with using their new tools for laying out a page entirely in CSS. In the past I'd often create a site in a 100% high table in order to have the footer always sitting on the bottom of the screen.

    I'm pretty used to text and link formatting in CSS, but using it for entire layouts is totally new for me. I'm trying to train myself to stop thinking in HTML tabular format.

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Lol, fair enough. With this hack above, what you do is give it a position: relative;, then for the footer position: absolute; bottom: 0; left: 0;

    This has it sitting at the bottom of the page unless the content is greater than 100%, in which case it goes to the bottom of the content. Just make sure you give the main content container(s) a bottom margin to make room for the footer.

    Off Topic:


    How is GoLive CS2? From the reviews I've read it sounds like it's better than Dreamweaver? Is that true?

  5. #5
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. Wow, this is way different than doing everything in tables. I guess once you get used to it it goes pretty quickly though.

    Off Topic:


    How is GoLive CS2? From the reviews I've read it sounds like it's better than Dreamweaver? Is that true?


    There's a real learning curve going from DW to GL. I only just got GL today, but I'm slowly picking up how they do things. I mainly wanted it for the better compatibility w/the other Adobe apps, and because of the better CSS support. And that was before I even heard about the Adobe/Macromedia merger!

    It does support CSS noticeably better than DW, incidentally. I especially like how you can create/edit CSS on a split screen (code on one side, the GL presentation of them on the other).

    I'm just getting into how you can drag/drop out different layouts nested within each other. For an idea of what I mean, checkout the first couple of GoLive videos on this page:

    http://www.layersmagazine.com/features/cs2-videos.php

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mstwntd
    Code:
    html>body #centered {
    height: auto;
    }
    
    #centered {
    width: 755px;
    height: 100%; 
    min-height: 100%; 
    margin: 0 auto; 
    }
    Hi Egor,

    What have you done wrong there

    #Centred is height:auto then it is over-ridden with height:100%. So although you have min-height:100% you have also made it effectively max-height:100% also. Which means mozilla and other browsers will never expand more than 100%.

    The height:auto needs to follow the height:100% so as to over-ride it.

    e.g.
    Code:
    #centered {
    width: 755px;
    height: 100%; 
    min-height: 100%; 
    margin: 0 auto; 
    }
     
    html>body #centered {
    height: auto;
    }

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    [/code]

    Hi Egor,

    What have you done wrong there
    [/code]
    Hi Paul,

    I believe that is the solution you gave me last year, is it not?

    Thanks for your correction though, I shall get it right from now on.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    believe that is the solution you gave me last year, is it not
    If I did then I gave it you the wrong way around then lol

    Its just that the height:auto will get over-ridden by the height:100% unless you change the order in the stylesheet

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Cape Town, SA
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And let's say I wanted to center the content of that div both vertically and horizontally. Well horizontally is a no-brainer, but vertically?

    Code:
          from this:                to this:
    -----------------------   -----------------------
    |content              |   |                     |
    |                     |   |                     |
    |                     |   |                     |
    |                     |   |      content        |
    |                     |   |                     |
    |                     |   |                     |
    |                     |   |                     |
    -----------------------   -----------------------

  10. #10
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by andyweb
    And let's say I wanted to center the content of that div both vertically and horizontally. Well horizontally is a no-brainer, but vertically?

    Code:
          from this:                to this:
    -----------------------   -----------------------
    |content              |   |                     |
    |                     |   |                     |
    |                     |   |                     |
    |                     |   |      content        |
    |                     |   |                     |
    |                     |   |                     |
    |                     |   |                     |
    -----------------------   -----------------------
    As you know, text align center will do it for the horizontal.

    For vertical you can set line-height to match the height of the div(works best when theirs only one lement in the div), or use display:table since vertical-align:middle is the default, the content will align in the middle(doesn't work in IE5.x).
    Last edited by DocType; May 8, 2005 at 20:59.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Cape Town, SA
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would I go about setting the line-height to the same of the div if the div is 100% high? Surely I can't write line-height:100% ?

    I haven't tried it yet, but the display:table thing would be great, if only it worked in IE5.x

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

    If you have an element of known height then vertical centering is relatively easy as you just basically do top:50% and then add a negative margin of half the elements wiheight to pull it exactly central.

    Perhaps beast with an example:

    http://www.pmob.co.uk/temp/flashbg.htm

    If you have elements of unknown height then its more complicated (and previously thought impossible in ie). As doctype mentioned you can use display:table for mozilla and other good browsers as vertical align works on table cells.

    However IE doesn't understand it. Therefore you can utilise a behavior of ie and position an element by nesting 2 elements. the outer is positioned at top 50% and the inners is psotioned at top:-50%. You would thing this would bring it back where it was but ie takes the 100% as the height of the parent and you end up with a perfectly vertically centred element. (Whether that behaviour will be consistent in ie7 is another story).

    http://www.pmob.co.uk/temp/vertical-align3.htm

    And another example just for luck

    http://www.pmob.co.uk/temp/vertical-align-examples.htm

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Cape Town, SA
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, sorry but I don't understand fully. You're still giving the imageholder div a fixed height when we need it to be 100%?

    Of course, this could be so easily solved with tables - gotta luv 'em

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You're still giving the imageholder div a fixed height when we need it to be 100%
    The container isn't the issue its the element of unknown height that's the problem. The example I showed above will work with any height 100% or not

    If you look at the first example in my last link above you will see that the text is centred the same as in a table and when you resize the page it still stays vertically centred. The height is just an arbitrary height but could be anything (e.g. 100%).

    If I knew what you were trying to centre exactly then I could offer a better example

    Its not a problem with css as using display:table allows this to be done very easily. It's just ie's lack of support as usual that confounds everything

  15. #15
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, IE is short-hand for "Incomplete Explorer".

    There are a couple of variations, "Incompatible Explorer", and "Inconsistant Explorer".

    Although the latter is questionable, IE is consistant, only at being different from all the rest.

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Cape Town, SA
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh, I understand what you're saying, thanks

    What I'm actually interested in achieving, is, if I have a 'mini-site', that I want to appear in the center of the browser (both vertically and horizontally). This mini site would have a fixed width and height, say 500px by 400px.

    I've always done this before using tables, but having to take out the doctype declaration otherwise the table don't stretch 100% in height. Obviously there HAS to be a better solution

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

    Well as you know the width and height you can simply use the method as in this example.

    http://www.pmob.co.uk/temp/flashbg.htm


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
  •