Suppose that we have a div element with zero padding, absolute positioning, predefined width (in pixels) and some plain text inside.
Now, we increase the CSS font-size property of the text by one pixel. By what measure should I increase the width of the div so that its layout remains the same (i.e. no words jump from one line to another due to disproportionally increased width)?
In case it is not possible with CSS font-size set in pixels, should it be set in pt or em, and why?
Scriptaculous has this as a built-in effect. Give it a try.
new Effect.Scale('id_of_element', percent, [options]);
I've never seen something like this done in CSS or even as a web-based app. That said, the answer to your second question, which is better for fonts, em or pt, is em. Why? because em is used to measure font sizes and is proportionate by design: 1em is 100% of the size of your body text font size. 1.1em is 110%, 0.8em is 80%, and so on.
As CLaRGe said, em is a measurement based on the font size of the parent element, so it is the natural choice to use when you want the size of an element proportional to font size. If you're measuring your font size in pixels, then an em is your font size in pixels, e.g. 200px when your font size is 10px means 20em.
CSS on its own is quite a static thing, as well as divs.
You cannot make properties of one element depend on the properties of some other one. Even for a single element, you cannot synchronize some of its properties with the others.
The only built-in solution that shows some characteristics of auto-adjustment is an HTML table, but you probably don't wish to use that.
The only way to add this dynamics is to use script languages, like JavaScript.
You want to specify both the width of your div and the font size in ems. Here is an example where changing the font size in pixels causes the div and text to resize proportionally without the layout changing:
<html>
<head>
<title>Proportional Resize Example</title>
<style>
body {font-size:10px}
div {
position:absolute;
top:100px;
left:100px;
width:20em;
font-size:2em;
padding:0;
background:green}
</style>
<head>
<body>
<div>
This text will resize proportionally.
This text will resize proportionally.
This text will resize proportionally.
</div>
</body>
</html>
In this example, if you change the font size of the body element, everything will resize proportionally. This is because the ems we used to specify sizes in the div are measured relative to the font size in the body element. Increasing the font size of the body element makes the ems larger in the div for both width and font size.