1. Download

From GitHub or jQuery.com

2. Create a simple web-page

style.css must provide simple layout in case JavaScript disabled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Simple page</title>

<link rel="stylesheet" href="./style.css" type="text/css" />
</head>

<body>
...
</body>
</html>

3. Adding jQuery and jPutty-plugin to Your Web Page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Simple page</title>

<link rel="stylesheet" href="./style.css" type="text/css" />
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.jputty.min.js"></script>
<script type="text/javascript">
$(window).readyresize(function(width, height) {

//using jPutty

});
</script>
</head>

<body>
...
</body>
</html>

4. Example

An example is included with the download package (look /examples)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Simple page</title>

<link rel="stylesheet" href="./style.css" type="text/css" />

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.jputty.min.js"></script>
<script type="text/javascript">
$(window).readyresize(function(width, height) {
if(width < 1000) width = 1000;
if(height < 500) height = 500;

$('#header').putty('xysize', 0, 0, width, 150);
$('#sideLeft').putty('xysize', 0, 150, 250, height - 300);
$('#content').putty('xysize', width/2 - 250, 150, 500, height - 300);
$('#sideRight').putty('xysize', width - 250, 150, 250, height - 300);
$('#footer').putty('xysize', 0, height - 150, width, 150);
});
</script>
</head>

<body>
<header id="header">
...
</header>
<aside id="sideLeft">
...
</aside>
<div id="content">
...
</div>
<aside id="sideRight">
...
</aside>
<footer id="footer">
...
</footer>
</body>
</html>