Markus Jonsson wrote:
> Hi!
> There's no way to ensure that two or more elements will be presented with exactly the same width and/or height, unless they are given an
> absolute width. Sometimes you don't want to set absolute measures, instead they should depend on the content, which may not be forseeable.
> ...
> But if you want them placed in very different parts of the document, it's not possible to have this effect.
My favourite example of this is a page or two on my site where I have some code
examples in elements with pale green backgrounds. I'd like these elements to
share the same width, but, I don't like them being the full width of the page.
I proposed similar ideas here a short while back, and a few people understood
what I meant. It's not wildly popular and it might take more interest before
anyone decides to run with it, but Mikko Rantalainen offered a way to express it
that's in line with CSS:
.thumbs li { height: auto; width: auto; sizing-group: "thumbnails"; }
That is, redefine "auto" for height or width to check if the element
belongs in an "sizing-group" and if it does, compute the height or width
to be the maximum of all elements in that group when contents of those
elements are shrink-wrapped (and define further what "shrink-wrapping"
means). If height or width is set to some other value but auto, then the
sizing-group magic wouldn't apply.
I don't know if your own suggestion is viable or not (although I find yours far
more readable, as well as mine, but mine was branded invalid), but I am glad to
see someone else draw the same conclusion, that it doesn't matter how large
something is on a page, as long as it's consistent.
The reason we may all be struggling with it is because it's a new concept to
layout. In print, it doesn't exist, because we know how wide the paper is that
we're going to be printing on, or the aspect ratio of it if we're going to scale
it, as well as the text size, typeface etc. If we want a bunch of items the same
size, we simply set them to be the same size and we're done.
On the Web, we don't have this knowledge: it's safest to let the user-agent
decide the size and layout for us and often, we don't have any choice anyway.
But we do need to be able to find out what layout decisions were made (based on
font size, window/page width etc), and factor them into the rest of the design.