jquery: layout problem when load and animate a page

I cannot fix this problem after hours - when the page is loaded through jquery.load, the text box drops and it shifts to the left next to the image when I use jquery.animate to make a sliding effect from left to right. The text gray box should not drops as I have set it to float to left in css.

Here is the jquery,

$('.block-item').click(function(){

         $('#container-article').remove();

        // Create a div after the parent clicked element.
        $(this).after('<div id="container-article"></div>');

        // Set the div to a variable and set its css.
        var container_article = $('#container-article').css({
            float:'left',
            width:0
            });

        // Load the article into container_article.
        container_article.load('article-3.php', function(){
            $(this).animate({
                width:800
            },500);
        });

        return false;
    });

The css,

.block-item {
    width:50px;
    height:500px;
    display:block;
    float:left;
    background:#fff;
  开发者_如何转开发  overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    }

#article-content {
    width:500px;
    height:500px;
    background:#ccc;
    overflow:hidden;
    }

#image-content {
    float:left;
    }

the html,

<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>

the loaded page,

<!-- binder-article -->
<div id="binder-article">

<div id="image-content"><img src="pic-2.jpg"/></div>

<!-- article-right -->
<div id="article-content">

    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p>
    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p>

</div>
<!-- article-right -->

</div>

How can I fix it?

Or any other better jquery function than animate?

Thanks.

You need to put your block-items in a parent container, and set the width of that parent container... like so:

<div id="parent_container">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
</div>

and some css

#parent_container {
 width:1165px;
}

If the block-items are dynamic in quantity, you could always count them with jQuery on document ready, and multiply their quantity by 50px (or whatever their width is), and add the width of the container-article 800px (or whatever its width is), and then set the parent containers width to that.

Ah - ok - I see your problem then...
instead of floating your contents of the binder-art, try setting them to be inline-block with nowrap on the parent...

So your CSS you provided should be replaced with the following (this should do the trick):

.block-item {
    width:50px;
    height:500px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    }

#article-content {
    width:500px;
    height:500px;
    background:#ccc;
    overflow:hidden;
    }

#image-content {
    }

#parent_container {
    width:1165px;
   }

#binder-article > #image-content,
#binder-article > #article-content {
    display:inline-block;
    vertical-align:top;
    }

#binder-article {
    white-space:nowrap;
    }

(This works in this case because the elements directly inside '#binder-article' are both divs, as opposed to a different scenario where the content might not be in any containers)