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-right: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?

Answers


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>

Need Your Help

Python 3: “Local Variable referenced before assignment”

python python-3.x

already looked at other answers and can't seem to fix this.

JS_malloc vs malloc

javascript spidermonkey

Is JS_malloc only used to allocate memory for javascript types in Spidermonkey?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.