Setting up the element that we are going to resize

First we use the Grid Builder to build a 50/50 split grid unit.

Note that we have placed the CSS property overflow: hidden on the element to keep the text from escaping when we resize.

#pg p { margin: 1em; } #pg { width: 600px; height: 200px; } #pg .yui-g { height: 200px; width: 600px; overflow: hidden; } #pg .yui-g .first { background-color: yellow; } #pg .yui-u { height: 100%; background-color: orange; overflow: hidden; } <div id="pg"> <div class="yui-g"> <div class="yui-u first" id="sizeIt"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p> </div> <div class="yui-u" id="sizeIt2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p> </div> </div> </div>

Creating the resize instance

Then we make the left grid unit a Resize instance and set it to only use the right handle.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'] }); }); })();

Handling the other grid

Now that we have one side resizing, we need to listen for the resize event. From here we will do the math needed to resize the other grid unit.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, col1 = null col2 = null; Event.onDOMReady(function() { var size = parseInt(Dom.getStyle('pg', 'width'), 10); col1 = Dom.get('sizeIt'); col2 = Dom.get('sizeIt2'); var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'], }); resize.on('resize', function(ev) { var w = ev.width; Dom.setStyle(col1, 'height', ''); Dom.setStyle(col2, 'width', (size - w - 6) + 'px'); }); }); })();

Setting the max and min sizes

Now we need to make sure that the units don't get too big or too small.

We do this by setting the minWidth and maxWidth of the left unit.

We set the minWidth to 150 pixels, then we get the size of the parent element (#pc) and subtract the min size of the other unit (in this case 150 pixels too). Now we have a maxWidth setting.

var max = (size - 150); var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'], minWidth: 150, maxWidth: max });

Adjusting the grid on load

Finally, we force a resize to bring both units into sync with each other.

resize.resize(null, 200, 200, 0, 0, true);

Full Example Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, col1 = null col2 = null; Event.onDOMReady(function() { var size = parseInt(Dom.getStyle('pg', 'width'), 10); col1 = Dom.get('sizeIt'); col2 = Dom.get('sizeIt2'); var max = (size - 150); var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'], minWidth: 150, maxWidth: max }); resize.on('resize', function(ev) { var w = ev.width; Dom.setStyle(col1, 'height', ''); Dom.setStyle(col2, 'width', (size - w - 6) + 'px'); }); resize.resize(null, 200, 200, 0, 0, true); }); })();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.