I’m trying to load in AJAX content into an empty but the div won’t

Question

0

Asked: May 18, 20262026-05-18T10:50:14+00:00 2026-05-18T10:50:14+00:00

I’m trying to load in AJAX content into an empty but the div won’t

0

I’m trying to load in AJAX content into an empty but the div won’t resize to the size of the content being loaded. Instead it looks like its overlapping the empty div like with a z-index affect.

Are there some guidelines on setting divs?

this is my set up:

My XHTML:

<div id="wrap">
    <div id="main-content">
        <div id="content-fill">
            <div id="files_left_pane">static content</div>
            <div id="files_right_pane">ajax content</div>
        </div>
    </div>
</div>

My CSS:

* { padding: 0; margin: 0; }
#wrap {
    position: relative;
    margin: 0 auto;
    width: 955px;
    padding: 0px;
    border-left: 1px solid #BDBDBD;
    border-right: 1px solid #BDBDBD;
    border-bottom: 1px solid #BDBDBD;
}
#content-fill { }
#files_left_pane { float: left; height: 100%; }
#files_left_pane { float: left; height: 100%; }

This is the code that handles the AJAX:

    function cabinet_tabs(){

        $(".tab_content").hide(); //Hide all content
        $("#files_left_pane > ul.tabs li:first").addClass("active").show(); //Activate first tab
        $("#files_right_pane > .tab_content:first").show(); //Show first tab content
        //On Click Event
        $("#files_left_pane > ul.tabs li").live('click', function() {
            $("#files_left_pane > ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $("#files_right_pane > .tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });
        $("#files_right_pane > table.zebra tr:even").addClass('alt');

        // AJAX
       $('.view-prospects').live('click', function(){
       $.post('resources/ajax/ajax.php', {
           action : 'prospects',
           uid : uid
       }, function(data){
           $('#files_right_pane > #prospects').html(data);
       });
     });
    }

UPDATE:

maybe I should point out that I have this js code that loads in my navigation pages via ajax and resized the #main-contnet div to fit the content. Within that #main-content div the #content-fill is loaded in from those links.

//------------------------------------------------------------------
// Hash Change and delegation of menu links
//------------------------------------------------------------------
var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#wrap"),
    baseHeight   = 0,
    $el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$(".nav_profile_menu > a.hash").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});
$(window).bind('hashchange', function(){
    newHash = window.location.hash.replace( /^#/, '' );
    if (newHash) {
        $mainContent
            .find("#content-fill")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #content-fill", function() {
                    $pageWrap.animate({
                        height: baseHeight + $mainContent.height() + "px"
                    });
                    cabinet_tabs();
                    $mainContent.fadeIn(900);
                });
            });
    };
});
$(window).trigger('hashchange');

does this have any affect?