Re: Equal width/height for grouped elements

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.

Received on Thursday, 8 March 2007 15:52:31 UTC