Children's dreams of width: 90% -20px;

Introduction

Those who once just started to learn CSS, especially with little experience programming desktop applications on Delphi or VB, probably wanted to be able to use constructions like left: 30% + 10;
Then we all learned to use margin, nested and floating blocks. Those who are still not a little indulgent are dedicated to: JSCSS
If you have never dreamed about it, you can not read
Task: make two rubber columns. The first is 30% in width, the second is 70%, there are 10 pixels between them, and the distance from the edges of the page to the left and to the right is also 10 pikes. And the first column automatically increases under the height of the second.
The decision about which I wanted to dream:
#block
{
width:30%-10px;
left:10px;
height:content.height;
top:20px;
}
#content
{
width:70%-10px;
left:30%+10px;
height:400px;
top:20px;
}

To indulge a little, I wrote this library.

Connection

In the HTML code we write:
<link rel='jscss' id='csslink' href='style.css'>
The file name (style.css) can be any. Id link can not be changed.
And at the end of the document, before closing the body, for example, we write:
<script language='javascript' type='text/javascript' src='jsresize.js'> </script>
Everything.

Syntax

In the file style.css, which we connected, we write descriptions of sizes. The syntax is simple:

#id_
{
height:100;
width:300;
left:30;
top:32;
}

object_id is the id attribute of an existing element (tag)
You can write numbers, with px you can omit (or you can not omit), use percentages (attention! Percentage always means a percentage of the width of the window, even if you specify, for example, height. I.e. height: 50% sets the height to half window widths. To specify heights you must use body.height). You can use arithmetic operations. For example, width: 50% + 2;
You can also use two expressions: body.height and body.width; Those. to set the height to 50%, you should write: height: body.height / 2;
You can use the properties of other objects, for example, height: content.height-20 ;, where content is the id of another element.
At the end of the line you need to put a semicolon. Using the top and left properties of other objects is possible, but not desirable. It is better to set the value the same as in the top or left property of the desired object.
Attention: follow the logic. For example, height: 90%; top: 15%; causes the object to grow constantly, pushing the browser window apart.
You can not miss anything. All 4 lines are required.

Examples

See the HTML code, it is extremely simple, and the attached style is simple.
Example 1
Example 1.5 (same, but with short text)
Example 2
download library
download archive with library and examples
Test for IE6, IE7, Opera 9.5, Firefox 2

Down to earth

When javascript is disabled, the layout, of course, does not work. Therefore, the library cannot be considered a serious product. Just to indulge is possible, but I would not use it in a serious commercial project. Of course, you can connect a real style file, and register an alternative layout in it. But consider serious positioning the script is not worth it.