jQuery切换幻灯片，其他内容不填充额外空间

Question

当我滑动菜单（15％宽度 - 左）时，内容（85％宽度 - 右）不会缩放以取代它。更具体地说，各种内容div / images只是停留在他们的位置，而不是移动和填充创建的空白空间。

我试过隐藏了navigation_element，并玩自动宽度，位置等。 我设法通过jQuery .css操纵section_element的宽度来实现它（所以当我点击幻灯片时它会变为100％ - 然后回来），但它不是很优雅。

<nav id='navigation_element'>
    // lots of links here //
</nav>

<div id='navigation_slider'>
</div>

<section id='section_element'>
<ul id='content_list'>
    // lots of ajax generated divs/images here, like the following //
    <li>
        <div id='grid'>
            <img>
            <img>
            <img>
            <img>  
            <img>
            <img>
            (...)    
        </div>
    </li>
</ul>
</section>

// the jquery for sliding //
$('#navigation_slider').click(function()
{
    $('#navigation_element').toggle('slide',{direction:'left'},700);
});

// the relevant css //  
#navigation_element
{
    text-align:left;
    width:15%;
    float:left;
    position:fixed;
}

#section_element
{
    float:right;
    position:inherit;
    text-align:left;
    width:85%;
}

#grid
{
    height:16.5%;
    position:relative;
    width:16.5%;
    display:inline-block;
}