> <http://test.intellit.nl/align1.png> the right float has 10px smaller
> font size. <http://test.intellit.nl/align2.png> the right float has
> same font size as left.
> Any clues?
Either you had a margin-top in there, or the software you got that
outline from is broken beyond repair.
A more direct approach...
....shows clearly how the floats line up.
As you can see, the line-height is a fixed "12px" - inherited from
#details-container, so with a font-size of 20px the text overshoots its
own line and indeed the entire float.
> According to the first part it should always align on the top. So I'm
> a bit confused.
If you want the text to line up regardless of font-size, you have to
adjust the position of the float itself depending on the *line-height*.
With a fixed line-height you can only achieve a static adjustment, which
will give end-users a whole range of problems if they resize text.
You can of course also declare a top padding on the float and push small
text down until it lines up where you want, but that is an even more
limited and static solution since it has to work in reverse and you
can't subtract padding based on font-size.
You have to let go of those fixed font-sizes and line-heights if you
want anything but a static - print - solution. A static solution will
break under stress anyway.
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/