i'm trying to force a div to have a certain height depending on his content and change it only when the new content is loaded.
Let's say i've:
<div id="wrapper" style="width: 90%; margin: 0 auto;">
<div id="collapse_saving_div" style="min-height: 100%;">
<div id="my_content" style="width: 100%;">
Content
Content
Content
</div>
</div>
<div id="my_bottom_content" style="clear: both;">
</div>
</div>
I'm going to dynamically load content into #my_content with a script that:
Hides #my_content
Shows a loader.gif
content gets retrieved
Hides the gif
Fades in #my_content
The thing is that obviously whenever #my_content gets hidden #my_content_bottom comes up and then goes down immediately after the new content is faded in without any kind of animation and all this "div jumping" looks bad.
It would roughly solve the problem if i could make the wrapper div not collapse.
In order to do that i tried making #collapse_saving_div and giving it a min-height of 100%, i thought doing that would fix his height at #my_content's till something bigger or smaller gets loaded. But it doesn't work.
Any suggestions? Thanks
edit: Solved it with js by using
var content_height = $('#main_content').height();
$('#main_content').hide();
$('.loader').height(content_height);
$('.loader').show();
Before removing the content of the div, add this: (raw JS because I don't do jQuery)
elem.style.height = elem.offsetHeight+"px";
Then, after the content is loaded, when you want the new height to take effect:
elem.style.height = "auto";