Vertical Positioning

[asprinwizard]

Hi there,

Can someone tell me what I need to add to my CSS to align my website vertically in the middle of the page. Also do I add this attribute to the body, or to the outer DIV.

At the moment I have the following applied to this DIV:

margin: 0px auto;

This makes it aligned horizontally to the centre. Can someone help me align this page vertially.

Cheers.

[Arkette]

#outerdiv{
margin: auto;
}

that's all you need....
Of course that wont work in ie because ie doesn't understand auto with margins.

[asprinwizard]

Thanks for your help but that doesn't seem to work for either IE or Firefox.

Anyone?

[doodlebee]

Vertically aligning divs within browsers using CSS is very difficult. CSS3 is supposed to make it easier to do, but the standard right now is pretty hard, *especially* if you don't know the ehight of your container.

First, you need this tag in your CSS:

html, body {height 100%;}

Setting your #outer to {margin:auto;} *would* work in Mozilla, as long as your container has a specified height. But if this is a blog page, or soemthing where the content container stretches your site out to God-knows-how-long, then vertical alignment is very hard to do.

IE (older versions than IE6) will also reqwuire you to have this tag in your CSS to horizontally center your outer div:

body {text-align:center;}

However, this will not only center your div, but also center all text within the body of the page. So you'll have to left-align text within the actual div calls themselves.

To vertically align, do this:

HTML:

#outer {
display:table;
height:400px;
position:relative;
overflow:hidden;
}
#inner {
position:absolute;
top:50%;
display:table-cell;
vertical-align:middle;
}
#centered {
position:relative;
top:50%;"
}

your CSS:

<div id="outer">
<div id="inner">
<div id="centered">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>

This is copied directly from the best source I've found for this issue. I'll provide a link - hopefully it won't get stripped (which is why I provided the code for you in case it is): [jakpsatweb.cz ]

Of course, you're going to have to play with this to fit the code you already have. But hopefully that gets you started.