Final solution for vertical align using CSS.

(EDIT)Guys this solution for unknown height! It is not the one with height specified that is known for very long time! This is brand new solution! I noticed people think its the old one. ;)(/EDIT)

Yep, you got that right. There is a solution and I am presenting it to you. Actually it was blogged in Czech Republic allready, but I wont go into much details here (no explaining here, sorry). Here is the link http://portfolio.canlog.cz/works/valign/

If you have any questions, feel free to ask. Cause I invented it, it will be easy for me to answer the questions. There are few bugs which I will list here later on.

So, how do you like it? ;)

By the way it is tested in Safari, IE5+, Firefox 1.0PR (probably works in all versions), Opera 7.5 (well it should work in 7.23, maybe even in lower versions), Konqueror, Netscape 6.2+ ... i guess thats all, if you have any other browser available, go ahead and test it, then write the results...

btw sorry for my english :( i am from czech republic (though i moved to canada recently)

http://www.jakpsatweb.cz/css/css-ver...-solution.html this is the article by Yuhů about this vertical centering, it lacks explanation of some bugs, so I will post them here.. :) AND his version uses _ so not valid, better use the one I use. :) or the conditional comments ;)

Jon Hicks posted a solution to vertical centering way back in July 2003, which uses valid CSS and works across all browsers.

Hi,

Thats quite a useful trick that takes into account ie's incorrect rendering of 50% in this situation to move the element back to the centre and not ot the top as it should do.( I don't see that left:50% and left:-50% are needed in this situation though.)

The display: table and table cell are known solutions for compliant browers but you have merged them together quite nicely.

I'm sure a lot of people will find this useful for vertically centering elements of unknown height.:)

Good work:)

Paul

Buddy Bradley: what the hell are you talking about? have a look at the solution... for his you have to know the height, here you dont have to :) this is really the first solution for the problem, if you dont see that it is different, then you must be blind... :D

Oh Paul the left centering is just because i wanted to show one guy it can go into middle and forgot to remove it. Anyways i guess you understood that lefts are for horizontal centering :)

Yes, I guessed that :)

I think the technique is going to prove very useful and thanks for sharing :)

Paul

Paul: I hope it does ;) currently working on one more nice thing, I will post it here on SitePoint once I finish :)

Look forward to it ;)

Still looking for someone to test it in IE5.2/Mac or some IE for Mac ;) anyone? please...

Hi,

Just tried it on my old mac os9.1 ie5.1 mac and I'm afraid it doesn't work. I tried a few things but couldnt coerce it to comply. It was ok on Netscape 7 mac though :)

Paul

well 5.1 is dead i guess... you wont see many things working in that browser :) there is 5.2 i guess or am i wrong?
netscape uses gecko core so it had to be ok ;)

Quote:

---

Originally Posted by Xerxos

well 5.1 is dead i guess... you wont see many things working in that browser :) there is 5.2 i guess or am i wrong?

---

IE/Mac 5.1 and 5.2 have very little difference. The main difference is that 5.2 will only run on OSX, and 5.1 or older will only run on OS8 or 9. Don't think you're getting off scott-free by ignoring 5.1 ;).

vgarcia: well many solutions dont support IE/Mac 5.1 or 5.2... except for this browser it works everywhere... maybe someone will find a way to get it working in IE/Mac 5.1 (sadly i dont have it so i cant do it) ;)
I think this is very good solution for the problem that was unsolved for sooo long. At least that is what I think. ;)

well i thought that maybe if you use "_" hack then it is going to work.. ;) just thinking.. does IE/Mac support html>body and this kind of stuff? if it does that could be the problem...

it SHOULD work in IE/Mac now.. can you try it again guys? ;) thx a lot

Hi Xerxos,

I already tried hiding the child selector as I know mac parses it ok.

I tried your code again anyway but its the same result. Mac ie5.1 won't recognise any percentage value on your #cont element because it is a pecentage based height itself.

I forced quirks mode in mac and then it recognises the percentage but it puts the div right back at the top of the page where it started and where iepc should really put it. It seems that ie mac doesn't have the same rendering problems that iepc has and is actually better programmed in this area.

I tried all the things I can think of but no joy :( It only does what its supposed to. Unfortunately it doesn't understand display:table so it cant have the same solution as mozilla etc.

What happens in your example is that the elements top is pust at 50% of the outer div and it just stays there.

I think your solution is good enough not to worry too much about ie5 mac as they will still get something usable but not quite right. Unless of course there is some way around it and something that you can use just on iemac but I can't think of it at the moment;)

Hope that helps anyway.

Paul

well i suppose there could be an extra style for IE Mac making the footer the classical one using clear: both; and stuff.. u know what I mean ? ;)

but thx a lot for testing anyway :)