How do I get my button to move with my .animate width expansion?

I have two divs, one is set to activate an animation on the other. One button div and one content div.

The animation works, but the content covers the button when it plays through. How do I keep the div (button) spaced the same distance on the right, before and after the animation? Essentially, moving to the right as its neighbor expands to the right? I am sure this is a CSS issue, but I am new to this so I am not sure.

JQ:

$(document).ready(function() {
    $(".about").click(function() {
        $(".aboutContent").animate({ width: "toggle"},"350");
    });
});  

HTML:

<div class="container">
    <div class="about"></div>
    <div class="aboutContent"></div>
</div>

CSS:

.container {
    position:absolute;
    width:940px;
    height:450px;
    top:0px;
    left:0px;
    z-index:1;
}
.about { 
    margin-left:10px;
    width:30px;
    border:dashed 1px #C1C1C1;
    cursor:pointer;
    z-index:2;
}
.开发者_StackOverflow中文版aboutContent  {
    position:absolute;
    left:0px;
    top:-1px;
    width:900px;
    height:450px;
    display:none;
    z-index:2;
}

I used the toggle() function and some specific CSS and animation adjustments to reproduce the affect you want (based on a 300px expansion for the purpose of demo, but you can easily change it to 900px like you require):

$(".about").toggle(function() {
    $(".aboutContent").css({
        display: 'block',
        width: '0'
    }).animate({
        display: "block",
        width: 300
    });
    $(".about").animate({
        "margin-left": "+=300"
    });
}, function() {
    $(".aboutContent").animate({
        width: 0
    }, function() {
        $(this).hide()
    });
    $(".about").animate({
        "margin-left": "-=300"
    });
});

See demo →

Change your HTML and CSS to the following. No need to change your jQuery.

Demo: http://jsfiddle.net/NWZKN/

<div class="container">    
    <span class="about">about</span>
    <span class="aboutContent">content</span>
</div>

.about {
    border:dashed 1px #C1C1C1;
    cursor:pointer;   
}
.aboutContent  {
    float: left;
    display: none;
}