jquery shifting of popup when content increases

Question

Hello ,

I have one div which is dynamic and getting the increments in the css dynamically from jquery to fit the contents if they are larger.

now the problem is that there is one popup associated with the same div.

if content increase that popup's comes down, I don't know how to solve this issue . please help.

HTML

< div id='main_div' >

< div id='myid' >some info< /div >

< div id='popup' >< /div >

< /div >


< input type='button' id='incre' >

jQuery:

$("#incre").click(function()
    {

$("#myid").html(" some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more  some more ");

    }); 

Thanks advance Dave

Answer 1

Set max height for this div. When content increases beyond this max height, use scrollbar to scroll contents.

div{
    max-height:300px;
    height:auto !important;          // for ie as it does not support max-height
    height:300px;                    // for ie as it does not support max-height
    overflow:auto;
    width:auto
} 

Answer 2

Have you tried using position absolute on the popup? Then the popup will not be affected by the height of the content div as it will be taken out of the flow of the document

Answer 3

Hey, I got the solution.

I have increased the height of 'main_div' manually. and inserted the popup under that. and that worked.

Thanks all of you.