JustWatchTheMarginTop

Quite slick indeed Shaun! And yeah, I was trying to find out when JWTS was going to go live too. I’ve been hounding Ryan on the IM and still no answer….but it’ll be awesome to see what happens on the launch.

Lates!

I frequently use tables in the same application as Ryan is doing here — in fact, I use tables for most of my layout design right now. Someday I’ll grow up and learn CSS layout design.

Your CSS alternative isn’t acheiving the same effect Ryan wanted. That is, to place the image in the exact center of the browser window, no matter the resolution of the user.

Ah, you’re right, Shaun. I hadn’t noticed the original’s position being so high. The point of the post is well received. Definately an interesting observation — and fun to play with, too!

Makes you wonder what they put in the coffee at the W3C sometimes, doesn’t it!

Just for the record, centered horiz./vert. is easily achievable in CSS with:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 200px;
    margin: 0;
    margin-left: -50px;
    margin-top: -100px;
    border: none;
    }

But I’m sure we all knew that anyway

Bravo.

You just (without knowing it) invented a way of vertical positioning and alignment (comething on which CSS is deeply crippled).

BRAVO!

Width to 100%, margin-top to 50% and we are as close to perfection as one could be.

Shaun, you are correct that the spec intends for percentage values to be based on the width — I can’t say why, but it’s clear in the CSS2 spec:

The percentage is calculated with respect to the width of the generated box’s containing block. This is true for ‘margin-top’ and ‘margin-bottom’, except in the page context, where percentages refer to page box height. (Link)

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’.(Link)

Hmm. It’s now May 27th, and I’m still watching the “margintop” and not the “sky.” Ryan must be cookin’ up something really special.

In theory, you could use a similar 50% margin subtracting 50% of the height via negative padding or positioning to vertically center the image. I haven’t tried, but I’d imagine it would work.

There was a nifty CSS-based site designed by a female guru whose name I can’t remember, who used a percentage-based margin on the container of her site - I noticed this a few months ago and thought it was a neat trick, although it was unusual having the whole site shift around all the time.

I’m sorry if I’m late with this or stating the obvious, but has everyone seen this example…

Dead Centre

That page helped me figure out CSS centering and still does to this day. In this case, he could have just changed the positioning of the “horizon DIV” so that it was slightly higher than center.

Regardless, the margin-top percentage effect is very strange. I still can’t figure out what the reasoning is behind it. Please enlighten me.

Regarding Matt’s comments:

I think the above link uses the same sort of technique - 50% to get the horizontal alignment, then a negative offset of half of the width and height (70px height in this case.)

A limitation of that method is its inflexibility; font scaling for example, does not cause the box to blow out in size and stay centered as the offset (35px) is fixed. I’m probably repeating someone else’s thoughts in saying, tt would be nice if a relative number like “-50%” would work ;)

wow thats quite spiffy there.. i really like that little trick.. never thought of someting neat like that before..

Scott: instead of then defining the height and/or width in pixels, you could supply it in em’s. That way it would scale with the fontsize.

Akaxaka:

Good call. You’d think since I do that on my site as-is, this would have come to mind here. Apparently not! I really need to sit down and put together a test page to try out a few different methods.

I think it just came alive..

There’s an explanation for the speciel behavoir when using percentages with top and bottom margins. I quote from 2nd edition (2004) of Eric A. Meyers “Cascading Style Sheets - The Definitive Reference”:

Seem strange? Consider that most elements in the normal flow are (as we are assuming) as tall as necessary to contain their descendant elements, including margins. If an elements top and bottom margins were a percentage of the parent, an infinite loop could result where the parent’s height was increased to accomodate the top and bottom margins, which would then have to increase to match the new height, and so on.

A very good book btw.