<div id="container"> <div id="top">Longer text that will be wraped but everything still looks right.</div> <div id="left">Left</div> <div id="center">Center</div> <div id="right">Right</div> </div> <div id="resizer"></div>
// On dragmove change the #container element dimensions // and trigger the resize event $('#resizer').on('dragmove', function(ev, drag) { $('#container').width(drag.location.x()) .height(drag.location.y()) .trigger('resize'); }); $('#left, #center, #right').on('resize', function() { // Set the new height for all elements var newHeight = $('#container').height() - $('#top').outerHeight(true); $(this).outerHeight(newHeight); }); $('#center').on('resize', function(ev) { // Set the width for the center element var newWidth = $('#container').innerWidth() - $('#left').outerWidth() - $('#right').outerWidth() - 1; $(this).outerWidth(newWidth); }); $(document).trigger('resize');
body{ font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif; } div { overflow: hidden; } #container { width: 450px; height: 250px; background-color: #EFEFEF; } #top { background-color: yellow; margin-bottom: 10px; padding: 10px; } #left { float: left; background-color: red; width: 80px; padding: 10px; } #center { float: left; background-color: grey; padding: 10px; } #right { float: right; background-color: green; padding: 10px; } #resizer { background-color: blue; cursor: pointer; position: absolute; left: 450px; top: 250px; padding: 5px; }