Search for a Simple Layout - Resizable

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 html, body { background-color:#EEE; width:100%; height:100%; margin:0; padding:0; overflow:hidden; } div.layout_div { position:absolute; overflow:hidden; background-color:#DDD; } div#header_div { background-color:#DDD; left:5px; right:5px; top:5px; width:auto; height:45px; } div#link_div { background-color:#DDD; left:5px; top:55px; bottom:30px; width:140px; height:auto; overflow:auto; } div#content_div { background-color:#FFF; left:150px; right:150px; top:55px; bottom:253px; width:auto; height:auto; overflow:auto; border:solid 1px #DDD;} div#content2_div { background-color:#FFF; left:150px; right:150px; bottom:30px; width:auto; height:215px; overflow:auto; border:solid 1px #DDD;} div#right_div { background-color:#DDD; right:5px; top:55px; bottom:30px; width:140px; height:auto; overflow:auto; } div#footer_div { background-color:#DDD; left:5px; right:5px; bottom:5px; width:auto; height:20px; } div.resizeLR_div { position:absolute; width:1px; background-color:#AAA; border:solid 1px #999; cursor:e-resize; z-index:1; } div#linkHandle_div { left:146px; top:60px; bottom:35px; height:auto; } div#rightHandle_div { right:146px; top:60px; bottom:35px; height:auto; } hr.resizeTB_hr { position:absolute; height:3px; background-color:#AAA; border:solid 1px #999; cursor:n-resize; z-index:1; margin:0; padding:0; } hr#contentHandle_hr { left:155px; right:155px; bottom:247px; width:auto; } hr#bottomHandle_hr { left:10px; right:10px; bottom:25px; width:auto; }

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 function onLoad() { var elements1 = [ {n:'linkHandle_div',a:'left'}, {n:'link_div',a:'width',p:'left'}, {n:'content_div',a:'left'}, {n:'content2_div',a:'left'}, {n:'contentHandle_hr',a:'left'}]; initResize('linkHandle_div', elements1); var elements2 = [ {n:'rightHandle_div',a:'right'}, {n:'right_div',a:'width',p:'right'}, {n:'content_div',a:'right'}, {n:'content2_div',a:'right'}, {n:'contentHandle_hr',a:'right'}]; initResize('rightHandle_div', elements2); var elements3 = [ {n:'contentHandle_hr',a:'bottom'}, {n:'content_div',a:'bottom'}, {n:'content2_div',a:'height',p:'below'}]; initResize('contentHandle_hr', elements3); var elements4 = [ {n:'bottomHandle_hr',a:'bottom'}, {n:'footer_div',a:'height',p:'below'}, {n:'link_div',a:'bottom'}, {n:'content2_div',a:'height',p:'above'}, {n:'content2_div',a:'bottom'}, {n:'right_div',a:'bottom'}, {n:'linkHandle_div',a:'bottom'}, {n:'rightHandle_div',a:'bottom'}]; initResize('bottomHandle_hr', elements4); }

HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <?php include 'include_php/general.inc.php'; include 'include_php/links.inc.php'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Complete Layout</title> <link rel="stylesheet" type="text/css" href="include_css/six_div.css" /> <script type="text/javascript" language="javascript1.5" src="include_js/resize.js"></script> <script type="text/javascript" language="javascript1.5" src="include_js/six_div.js"></script> <script type="text/javascript" language="javascript1.5"><!-- autoSize code here -->></script> </head> <body onload="onLoad();" onresize="onResize();"> <div id="header_div" class="layout_div"> <h2>Search for a Simple Layout - Resizable</h2> </div> <script type="text/javascript">autoSize('header_div');</script> <div id="link_div" class="layout_div"> </div> <script type="text/javascript">autoSize('link_div');</script> <div id="linkHandle_div" class="resizeLR_div"></div> <script type="text/javascript">autoSize('linkHandle_div');</script> <div id="content_div" class="layout_div"> </div> <script type="text/javascript">autoSize('content_div');</script> <hr id="contentHandle_hr" class="resizeTB_hr"></div> <script type="text/javascript">autoSize('contentHandle_hr');</script> <div id="content2_div" class="layout_div"> </div> <script type="text/javascript">autoSize('content2_div');</script> <div id="rightHandle_div" class="resizeLR_div"></div> <script type="text/javascript">autoSize('rightHandle_div');</script> <div id="right_div" class="layout_div"> </div> <script type="text/javascript">autoSize('right_div');</script> <div id="footer_div" class="layout_div"> </div> <script type="text/javascript">autoSize('footer_div');</script> <hr id="bottomHandle_hr" class="resizeTB_hr"></div> <script type="text/javascript">autoSize('bottomHandle_hr');</script> </body> </html>
content of right div