Hello Brian, I think my example code is not proper to explain the situation. Below is the modified version of the code, that might explain you the situation.
Basically the height in all my pages is fixed say 500px. I make sure that the content does not cross the limit, still in some parts the content grow, so I place them in div tags with overflow property.This helps me to maintain the height of the layout on all pages, and the larger content appears in scrollble area within the region (just like iframe). If I apply overflow on my container div as you suggested it will cause the scrollbar for entire region, that is not what i want. See the example code below to see the exact problem example code: <!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=utf-8" /> <title>Untitled Document</title> <script language="javascript" src="javascripts/prototype.js"></script> <script src="javascripts/scriptaculous.js?load=effects" type="text/javascript"></script> <script language="javascript"> function doSlide(){ new Effect.SlideUp ('content_area',{ afterFinish: function(){ new Effect.SlideDown('content_area'); } } ); } function doShrinkGrow(){ new Effect.Shrink ('content_area',{ afterFinish: function(){ new Effect.Grow('content_area'); } } ); } </script> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><h2><strong>Test Effect</strong> </h2></td> </tr> <tr> <td width="22%"><a href="javascript:doShrinkGrow()">Shrink & Grow</a> <br /> <a href="javascript:doSlide()">Slide Up and Down</a> </td> <td width="78%"><!-- this is my content update area--> <div style="height:300px"> <div id="content_area"> <table border="1"> <tr> <td colspan="2"> This is some top text This is some top text This is some top text This is some top text This is some top text This is some top text This is some top text This is some top text This is some top text This is some top text </td> </tr> <tr> <td width="50%"> This is small text region. But the content on the right has larger text. So i have added it to the div with overflow auto, so that it doesnot break the table fixed height. If I apply the overflow to outer div, it causes the scrollbar on the entire region. I want only the right portion scrollable (consider it like iframe) maitaining the same height on all pages even if content on right is larger. </td> <td width="50%"> <div style="overflow:auto;height:200px"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vel elit. Phasellus tortor. Praesent venenatis, ligula sit amet ultricies gravida, augue nisl mollis tortor, in facilisis risus turpis ac turpis. Mauris luctus, velit sed lobortis venenatis, leo urna dictum leo, eu scelerisque dolor dolor vitae massa. Aliquam posuere, nibh nec venenatis rhoncus, elit odio dignissim augue, pretium venenatis lacus ipsum at eros. Proin volutpat, nunc id suscipit varius, turpis diam tristique sapien, id condimentum dolor libero sit amet velit. Sed sapien erat, adipiscing at, varius at, malesuada in, elit. Ut eu diam vel purus rhoncus mattis. Donec elementum felis non metus. Aliquam erat volutpat. Suspendisse elementum eros sit amet leo. Sed quis ipsum eu elit lacinia imperdiet. Pellentesque suscipit justo sit amet purus varius rhoncus. Suspendisse pulvinar blandit ipsum. Duis viverra dui eget lectus vestibulum tempor. Nam euismod imperdiet odio. Nulla felis nisl, porttitor pretium, semper at, mollis at, nulla. Quisque vestibulum odio rhoncus ipsum. Integer id libero eu massa laoreet euismod. Vivamus justo tellus, sodales eu, aliquam id, auctor quis, sem. Vestibulum id leo. Morbi eu dui sed lectus molestie gravida. Cras pretium varius dolor. Quisque blandit nonummy urna. Duis sit amet nisi ac nisi aliquam congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vel elit. Phasellus tortor. Praesent venenatis, ligula sit amet ultricies gravida, augue nisl mollis tortor, in facilisis risus turpis ac turpis. Mauris luctus, velit sed lobortis venenatis, leo urna dictum leo, eu scelerisque dolor dolor vitae massa. Aliquam posuere, nibh nec venenatis rhoncus, elit odio dignissim augue, pretium venenatis lacus ipsum at eros. Proin volutpat, nunc id suscipit varius, turpis diam tristique sapien, id condimentum dolor libero sit amet velit. Sed sapien erat, adipiscing at, varius at, malesuada in, elit. Ut eu diam vel purus rhoncus mattis. Donec elementum felis non metus. Aliquam erat volutpat. Suspendisse elementum eros sit amet leo. Sed quis ipsum eu elit lacinia imperdiet. Pellentesque suscipit justo sit amet purus varius rhoncus. Suspendisse pulvinar blandit ipsum. Duis viverra dui eget lectus vestibulum tempor. Nam euismod imperdiet odio. Nulla felis nisl, porttitor pretium, semper at, mollis at, nulla. Quisque vestibulum odio rhoncus ipsum. Integer id libero eu massa laoreet euismod. Vivamus justo tellus, sodales eu, aliquam id, auctor quis, sem. Vestibulum id leo. Morbi eu dui sed lectus molestie gravida. Cras pretium varius dolor. Quisque blandit nonummy urna. Duis sit amet nisi ac nisi aliquam congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div></td> </tr> </table> </div> </div></td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
