This guy claims he solved the problem. The example used 3 divs, the clean version is at the bottom of the page. Worked in IE for me :D
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
On 9/7/05, designer
<[EMAIL PROTECTED]> wrote:
Hello all,
I've been holding back with this, as I've said it before and I can hear
the yawns from some of the longer suffering members . . .
OK, I don't use tables, except for tabular data. I've been doing this
standards stuff for for just one year and there is only one place where
I use a table for layout, and that is to put something (div, or
whatever) slap bang in the middle of the screen, both vertically and
horizontally. There are many ways to do this, but none of them (that I
know) are as simple or as reliable as this method using a single-cell table:
CSS:
body, html {
height : 100%;
}
#layoutgrid{
height : 100%;
width : 100%;
}
#layoutgrid td {
vertical-align : middle;
text-align : center;
}
Then, in the body:
<table id="layoutgrid">
<tr>
<td >
This is in the middle!
</td>
</tr>
</table>
Other methods use _javascript_, others use negative margins. The negative
margins way is neat, but it suffers from the fact that, if the viewport
is smaller than the thing you are centering [eg, content height is
500px and you have a screen that is only 640 by 480] you cannot see the
top of the content, and (obviously) you can't scroll there!
So, the challenge: do what I've done above with no table, AND make it
work in IE. It's easy if you forget IE (see 1), but since IE is still
the primary browser in use that isn't a solution.
[1. see Steve Clay:
http://mrclay.org/web_design/vertical_centering_by_the_specs.html ]
Anyone?
Bob McClelland
www.gwelanmor-internet.co.uk
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
