Chetan Crasta wrote:
I have made an example of the design here:
http://roughtech.com/t/testali.html
It uses CSS only.
It seems to use the positioning technique I outlined and demonstrated, but
it contains lots of features quite independent of the issue at hand, such as
odd line heights. In fact it fails to satisfy the requirement, since the
bottom of the text at the left and at the right are not aligned. Line-height
of 1.87em is grossly too large for any normal texts; for a short paragraph,
it creates the impression of two quite separate lines - and prevents the
desired alignment.
It works in all modern browsers and IE6 and IE7. I
have tested it with different fonts and font sizes.
I won't argue about that, though the code on your example page uses
px-valued font size and dimensions (which is not inherent in the technique).
The problems of CSS layout usually don't emerge in simple cases (though as
mentioned, you have summoned some of them). When inserted into a larger
context, possibly with interaction with other CSS rules, and especially when
applied to achieve "semi-flexible" layout, problems start popping up. By
"semi-flexible" I mean things like making some elements (set side by side
horizontally) occupy given widths (in pixels or em units for example) and
one of them consume all the rest of the available width. Having struggled
with such issues, people usually end up with making the layout more rigid
than it needs to be.
Using a table would not be appropriate. Tables are not for layout.
I don't want to comment on religious matters as such, but I'd just like to
point out that the most natural approach to the desired alignment in CSS
would be to set display: table-cell and vertical-align: bottom (or
text-bottom) for the two elements etc. While that approach does not work due
to lack of sufficient support, some of us might be willing the use the HTML
equivalent of the technique, possibly using CSS for part of the job (when
CSS features are well supported).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
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/
