CSS - Test Your CSS Skills Number 18 :

[YuriKolovsky]

Paul O'B
If you remove some settings you can start to see how this effect builds up.

I've been looking at the simplified version (a lot), it is pretty complicated, i think I'm getting the idea behind it, although not completely, and to be honest it's extremely original.

[RyanReese]

So Paul when will the next quiz b? Is it a good one ?

[YuriKolovsky]

nice breather

[Paul O'B]

New Quiz Posted

[Anton P]

Eric's Quiz A is very cool and relies on some interesting float behaviour in Firefox and IE8. (Opera and IE<=7 are a no-go.) I'll have to think carefully about whether this behaviour is CSS2.1-compliant; my guess is that it is, technically, but that not much thought was ever given to what would/should happen when the float is not in the same containing block as the paragraph and that the spec might need to be changed in light of this behaviour. (A couple of other issues in the CSS2.1 spec have recently come to light involving floats in different containing blocks.)

The browser is trying, in left-to-right mode, to lay out the line boxes of the paragraph from left to right and from top to bottom, exactly as we're all familiar with: when it hits an obstruction (a right float or the right edge of the P) then the line box is terminated and a new one starts at the next available starting place underneath. (Only one line box is allowed at any given horizontal level.) The interesting thing is deciding where that starting place is.

We know(?) that no line boxes are allowed to be to the left of a left float or to the right of a right float. We're accustomed to finding that the left float will be at the left of the P, and so the rule trivially applies in our everyday web pages and we give it no thought; but here the floats are hanging about in the middle and Fx and IE8 think the rule should still apply.

In Paul's cut-down version of Eric's code there are some places where the leftmost float is a right float, which means a line box is permitted sit to the left of it; there are some places where the rightmost float is a left float, so a line box it permitted sit to the right of it; and there are other places where two floats sit side-by-side but neither is as just described, so no line box can sit on the same horizontal level as those two floats because of the rule described above. Hence the alternating text lines and blank lines in Paul's code.

Since only one line box is allowed at any given horizontal level, Eric had to make cunning use of tiny line-heights etc to feign the effect so that when the text bleeds out of the tiny line boxes it visually appears at the same horizontal level on either side of the middle floats. Very clever, and worthy of an evil genius!

[Incidentally, the browsers must have to decide where to test first for a possible line box starting position. Seemingly, Fx tries to start the line box at the left of the P, but if the leftmost float is a left float then the line box can't go there so Fx next tries to put it at the right. If it can't go there either then Fx moves the linebox down a bit and tries again. I wonder if Fx would test the right side first in a right-to-left document?]

[YuriKolovsky]

agreed

[Paul O'B]

Very clever, and worthy of an evil genius!

Yes, I think Erik's answer to the quiz I set is the top solution for all the quizzes we've had so far.

Now all we have to do is get float:center implemented in the specs

[Stomme poes]

Very clever, and worthy of an evil genius!

So... when is he going to announce those evil robots he's been working on? Oh wait, I wasn't supposed to say that--