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