ajax loading content but my div won't expand to fit it

I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...

I have a setup like this

<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>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-ri开发者_开发百科ght:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}

the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.

any advice?

as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.

live example: http://jsbin.com/udori5

Set Your div position as relative

<div id="files_right_pane" style="position: relative;">ajax  content</div>

Easiest fix is add float:left to content-fill