100% height AND centered horizontally?

[durandel]

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!

[Egor]

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:

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.

[durandel]

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.

[Egor]

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?

[durandel]

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

[Paul O'B]

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.

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

[Egor]

[/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.

[Paul O'B]

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

[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?

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

[DocType]

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?

      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).

[andyweb]

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

[Paul O'B]

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

[andyweb]

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

[Paul O'B]

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

[DocType]

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.

[andyweb]

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

[Paul O'B]

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