Topic: horizontal & vertical centering

Look at this and tell me if it works in your browser or not.


Thanks.

no
IE 5.1 Mac

yes

IE 6.0 Win XP

:: m a x ::

That is a brilliant method. Did you come up with that yourself?

Works here in IE 6, and it's only slightly off center in Mozilla 0.9.3.

The above works for me on my Win2000 box in IE6 and N6.2...

It not a vertical centering solution, but here is another example of cross-borwser horizontal positioning.

http://www.jasonstahl.net/misc/align-with-css.jsp

DigitalUbiquity

[This message has been edited by DigitalUbiquity (edited 03-07-2002).]

Thanks all,
I read a lot of horizontal centering with css, but never found a solution for vertical centering.

Jeni, can you send me a screenshot?

Anybody uses Opera?

edit: Slime, I fixed it. Now it looks the same on both browsers.



[This message has been edited by u-neek (edited 03-07-2002).]

Everything's fine in Opera 5.0 and 6.0!

edit: but in NN 4.7, the negative margins don't work, and the distance from the top is the same as the distance from the right (50% of the window's width).

kuckus

[This message has been edited by kuckus (edited 03-07-2002).]

Yes, I am very excited to have a vertical centering option...

DigitalUbiquity

Hey DigitalUbiquity - Thanks for the link! I was reading the page that he links to, and I think that just solved nearly every CSS positioning issue I've ever had.

Thanks!

Hey why don't you just use one big table set it as height="100%" width="100%" the put a cell in there with horizontal centered and vertical middle???

Is there a difference to what you just did and what I am trying to say?

:: m a x ::

Ducati, his goal is CSS-only layout, so no tables are allowed (but you can do that with tables, too)...

Hmm.. thats what I thought after I looked at it and read the threads above..

but what would be the benefit of using CSS instead of tables for something like this??

:: m a x ::

Tables should only be used for presenting tabular content, they shouldn't be used for page layouts anymore. That's what CSS should be used for...

I'd love to use css more for page layouts, but what about browsers like nn4? I know we should not have to worry about designing for nn4, but the fact is that a lot of people still have it. wouldn't tables be more reliable for now?

--Lurch--

Hi all, that vertical centering is fantastic. I have been after that for some time. However we have one small problem. If the user resized the browser window, the centered table does not move with the resize! is there a cure for this? . please advise. Trevor Saint

Well, first of all, it's a centered div, not a table.

Second, it does move with the resize. What browser are you using?


Since someone already dug this up, I'd like to point out that a disadvantage to this method is that if the browser window is sized smaller than the div, parts will be pushed off the screen by the negative margins (and that you can't scroll over to them).

And Lurch: Yes, people still use NN4 (*shudder*) but I usually just hide tricky CSS from it using the @import method, and possibly serve it a simpler stylesheet through the more common <link>.

WOW! It's a blast from the past This topic was started a way back in March 2002...

Holy crap, I thought that said March 2003!

OK then, take back what I said about NN4

2002 lol, well I tried that css in Opera 7.0 and although it works on a first load, when you manually resize the browser window, the centered box does not flow with it. I wonder if you managed to correct this problem at all?

I've tested it in IE 6, Netscape 7, and Firebird 0.6, and in all of those browsers, the vertical centering automatically adjusts as I resize the window.

So I'm assuming it must be a problem specific to Opera 7 or to your particular configuration.

I've just tested that page in Opera 7.11 and I can confirm that it doesn't properly position div layer when you resize window. So, it must be an Opera only bug, which they will probably fix in the upcoming 7.2 version (that is if someone reports the problem to them).

Anyway, only way to fix this is to reload complete page when window is resized, and the following code will do the trick:

<body onresize="if (window.opera) { document.location.reload() }">
</body>