I may be missing something here, but I've been thinking lately that mixing some basic algebra and arithmetic into CSS could offer some really powerful options and solve some common design problems. Maybe this stuff is part of the CSS3 spec, which I'm not too aware of, but if not it might be something to consider.
The main instance I'd love to use algebraic quantities is for displaying a set of floating containers on a page. In my photo gallery, for instance, each of the containers (containing a photo, title link, and number of photos) floats to the left, so as your page gets wider, they slide into longer rows to maximize the use of the page. Try it by going to the gallery and making your browser wider and narrower. However, this runs into problems when one of the containers has an extra long title and disrupts the wrapping. What if I could set a value of x to the height of all of the containers so they didn't have a fixed height but all of their heights were equal? The same could go for making a square element on the page. I could set the width and height both to n and they would be equal no matter what content was in the box. Yet another example might be a set of tabs for a menu. I don't know how long each title will be, but I want each of the tabs to be the same width. Set the width of the tabs to w and they'll all be equal no matter what.
Sprinkling in some basic arithmetic could be useful as well. Say, I want an element to be a percentage of the width of the page minus a fixed number of pixels. In several instances lately, I've wanted to set a table of data to be the full width of the page but it has a menu to its left that is 300 pixels wide. If I set the table to have 100% width in my CSS, it causes horizontal scrolling because it's assumed that I want it to be 100% of the whole page. What if I could determine the width to be 100% - 300px? This is just one example, but there are numerous instances where this comes into play.
Has this been considered before and rejected for good reasons? Or is it in the works? Although, obviously it may add much more complexity to the rendering of CSS, it seems at first glance like a powerful layout addition.
Comments
will - May 4, 2004 9:38 PM
I was thinking about this exact same thing yesterday. I'm hoping it will be included in CSS3 or whatever, because you're totally right. The problem at the moment is that for accurate positioning, borders must be defined in pixels, which means cannot define a content box in ems if you wanted to scale it with the text size and ALSO take extra space taken up by borders into account. My site has exactly this problem.
If they'd done the box model different, this wouldn't have been such a problem.
The Deuce - May 5, 2004 11:39 PM
A great example of dynamic design is the infamous ever changing header at http://www.1976design.com/blog/. I would love to see this achievable with simply CSS.
Craig - May 6, 2004 3:06 AM
http://www.w3.org/TR/NOTE-css-potential has the basic ideas that I believe that you are wanting.