Drag Middle Page Bar Page Resizer style body html width 100 height 100 padding 0 margin 0 body height 600px clearfix after content display table clear both main background color BurlyWood float right height 200px width 75 sidebar background color IndianRed width 25 float left height 200px overflow y hidden dragbar background color black height 100 float right width 3px cursor col resize ghostbar width 3px background color 000 opacity 0 5 position absolute cursor col resize z index 999 style div class clearfix div id sidebar span id position span div id dragbar div sidebar div div id main main div div div id console div script src https cdnjs cloudflare com ajax libs jquery 3 6 0 jquery min js script script var i 0 var dragging false dragbar mousedown function e e preventDefault dragging true var main main var ghostbar div id ghostbar css height main outerHeight top main offset top left main offset left appendTo body document mousemove function e ghostbar css left e pageX 2 document mouseup function e if dragging var percentage e pageX window innerWidth 100 var mainPercentage 100 percentage console text side percentage main mainPercentage sidebar css width percentage main css width mainPercentage ghostbar remove document unbind mousemove dragging false console log ready script style body height 600px div color fff font family Tahoma Verdana Segoe sans serif container background color 2E4272 display flex side background color 4F628E width 300px position relative main background color 7887AB z index 1 flex grow 1 dragbar background color black height 100 position absolute top 0 right 0 width 5px cursor col resize style div id container div id side Side br Blabla br Blabla br Blabla br div id dragbar div div div id main Dynamically sized content div div script src https cdnjs cloudflare com ajax libs jquery 3 6 0 jquery min js script script var dragging false dragbar mousedown function e e preventDefault dragging true var side side document mousemove function ex side css width ex pageX 2 document mouseup function e if dragging document unbind mousemove dragging false console log ready script style body height 300px container position relative border 2px solid orange height 100 main sidebar dragbar height 100 background white position absolute sidebar background e6e9f0 width 50 main right 0 overflow scroll border radius 10px background white width 50 transition 0 3s ease in out 0s box shadow 0px 0px 0px 1px rgba 0 0 0 0 1 main hover box shadow 0px 3px 25px rgba 0 0 0 0 2 0px 0px 0px 1px A8D1FD dragbar right 0 width 5px opacity 0 cursor col resize background 0099e5 transition 0 3s ease in out 0s opacity 0 3s ease in out 0s dragbar hover resizing opacity 1 important transition 0 3s ease in out 0s opacity 0 3s ease in out 3s style div id container div id sidebar div id dragbar div div div id main Main content here div div script let dragging 0 let container document getElementById container let sidebar document getElementById sidebar let main document getElementById main let dragbar document getElementById dragbar console log dragbar dragbar function clearJSEvents dragging 0 container removeEventListener mousemove resize dragbar classList remove resizing function resize e if e pageX 20 e pageX container offsetWidth 20 return var percentage e pageX container offsetWidth 100 var mainPercentage 100 percentage console log percentage percentage sidebar style setProperty width percentage main style setProperty width mainPercentage container onmousedown function e console log mousedown e preventDefault dragging 1 dragbar classList add resizing container addEventListener mousemove resize document onmouseup function dragging clearJSEvents console log ready script
v id container div id side Side br Blabla br Blabla br Blabla br div id dragbar div div div id main Dynamically sized content div div script src https cdnjs cloudflare com ajax libs jquery 3 6 0 jquery min js script script var dragging false dragbar mousedown function e e preventDefault dragging true var side side document mousemove function ex side css width ex pageX 2 document mouseup function e if dragging document unbind mousemove dragging false console log ready script style body height 300px container position relative border 2px solid orange height 100 main sidebar dragbar height 100 background white position absolute sidebar background e6e9f0 width 50 main right 0 overflow scroll border radius 10px background white width 50 transition 0 3s ease in out 0s box shadow 0px 0px 0px 1px rgba 0 0 0 0 1 main hover box shadow 0px 3px 25px rgba 0 0 0 0 2 0px 0px 0px 1px A8D1FD dragbar right 0 width 5px opacity 0 cursor col resize background 0099e5 transition 0 3s ease in out 0s opacity 0 3s ease in out 0s dragbar hover resizing opacity 1 important transition 0 3s ease in out 0s opacity 0 3s ease in out 3s style div id container div id sidebar div id dragbar div div div id main Main content here div div script let dragging 0 let container document getElementById container let sidebar document getElementById sidebar let main document getElementById main let dragbar document getElementById dragbar console log dragbar dragbar function clearJSEvents dragging 0 container removeEventListener mousemove resize dragbar classList remove resizing function resize e if e pageX 20 e pageX container offsetWidth 20 return var percentage e pageX container offsetWidth 100 var mainPercentage 100 percentage console log percentage percentage sidebar style setProperty width percentage main style setProperty width mainPercentage container onmousedown function e console log mousedown e preventDefault dragging 1 dragbar classList add resizing container addEventListener mousemove resize document onmouseup function dragging clearJSEvents console log ready script