1

I want to be able to use JQuery code to alter some pages produced with AP divs by another application so that an outer container div grows vertically with the inner div(s) which are AP divs. A simple generic example is shown. 

<body>
<div id="wrapper" style="border:1px solid black;height:400px;width:200px;" >
<div id="txt" style="position:absolute;top:100px;left:100px;background-color:red;width:100px;border:1px;">
</div>  
</div>

The #wrapper is essentially a pseudo page background div which originally has fixed dimensions in the app with possibly different back color to the body. I will be say adding content to #txt dynamically and I want #wrapper to enlarge to 'cover' the new div contents inside. Hope I have explained it well enough.

Is this possible in an automatic fashion or do I have to do some sums for all the inner divs and then alter the height of the containing div #wrapper accordingly. Need to retain absolute positions.
Thanks
John B

Sorry! didn't put a height setting in #wrapper - added in height:400px.

user858599
  • 23
  • 1
  • 4

2 Answers2

0

Not sure a pure CSS solution is possible with the position:absolute on the inside div.

You could do this with jQuery like so

var h = $('#txt').height();
$('#wrapper').height(h + 100 + 'px');

Example: http://jsfiddle.net/jasongennaro/aQh2Q/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • Pretty much what I had. See [link](http://jsfiddle.net/johnbirt/HgPv7/). Doesn't work if one of the absolute divs also has inner div. The App currently doesn't produce such I don't think but may do in future. I would like to be able to auto expand non floated AP divs to fit content but no success yet. – user858599 Aug 23 '11 at 17:07
0

Please have a look at this question

make div's height expand with its content

I hope it helps you someway.

Community
  • 1
  • 1
Souvik
  • 1,027
  • 8
  • 13