I'm sure a lot smarter folks than me will have an easy answer for you,
but:
If you're having this problem in IE, I seem to recall that you have to
give the div some kind of height in the starting CSS or it won't
recalculate properly with changes. Hopefully that would be as easy as
specifying height:auto.
If it's a more general behavior, how about creating a new div, loading
your data into it, then using the jQuery replaceWith() method to
replace the old content div with the new one. That might be one way to
force the browser to recalculate the height of the (new) content div
and everything around it. Something like:
var newContent=$('<div id="content"></div>').load
(toLoad,'',showNewContent());
$('#content).replaceWith(newContent);
You could probably chain that together in one step as well.
Hope that helps a little.
--Tom
On Jan 24, 7:51 pm, "webmas...@terradon.nl" <webmas...@terradon.nl>
wrote:
> Hi all,
> i use a menu for loading new content inside a content div, so far so
> good.
> Most of the time i have to load a big table, which is higher then the
> content div.
> In this case the footer div does not go down, my content div does not
> resize his height and goes through the middel of my table. Not sure if
> this is a jquery issue or a css issue
>
> Menu code:
>
> $('.sub li a').click(function(){
> // test alert
> //alert("clicked on sub item..");
>
> var toLoad = $(this).attr('href');
> // test alert
> //alert("content to load: " + toLoad);
> $('#content').hide('normal',loadContent);
> $('#load').remove();
> $('#wrapper').append('<span id="load">LOADING...</span>');
> $('#load').fadeIn('normal');
> function loadContent() {
> $('#content').load(toLoad,'',showNewContent())
> }
> function showNewContent() {
> $('#content').show('normal',hideLoader());
> }
> function hideLoader() {
> $('#load').fadeOut('normal');
> }
>
> return false;
> });// end of menu
>
> This are the div's:
>
> <div id="contentwrapper">
> <div id="contentcolumn">
> <div class="innertube">
> <div id="content">Initial Content...
>
> </div> <!-- Einde div content -->
> </div> <!-- Einde div innertube -->
> </div> <!-- Einde div content column -->
> </div> <!-- Einde div contentwrapper -->
>
> And CSS:
>
> #contentwrapper{
> float: left;
> width: 100%;}
>
> #contentcolumn{
> margin-right: 200px; /*Set right margin to RightColumnWidth*/}
>
> .innertube{
> margin: 10px; /*Margins for inner DIV inside each column (to provide
> padding)*/
> margin-top: 0;
>
> }
>
> no css for content div.
>
> How do i specify and change the height of the content div?
