jQuery animate horizontal stretch left issues

I'm trying to stretch a div aligned to the right side of the page from 30px to 100% of page width. My javascript is moving a 30px bar across the page.. wrong :(

Thank you!

HTML:

 <div id="header">
    <div id="logo">
                <h1>DEETRA</h1>
            </div>
</div>
<div id="main">
            <div id="trigger_left">
                <img class="arrow_small" id="main_arrow" src="images/left_small.png" alt="slide menu out" />
        </div>
            <div id="trigger_right">
                <img class="arrow_small" id="main_arrow" src="images/right_small.png" alt="slide menu in" />
            </div>
            <div id="slider">
                <div class="trans" id="overlay"></div>
                <div id="content">
                    <div id="main_nav">
                <div class="nav" style="float:left;">
                                <h3>CAMPAIGNS</h3>
                                <p>Sed enim risus, congue non, tristique in, commodo eu, metus.</p>
                        </div>
                            <div class="nav" style="float:right;">
                                <h3>CONTACT</h3>
                                <p>Sed enim risus, congue non, tristique in, commodo eu, metus.</p>
                        </div>
                            <div class="nav" style="margin:0 auto;">
                             <h3>COLLECTIONS</h3>
                             <p>Sed enim risus, congue non, tristique in, commodo eu, metus.</p>
                        </div>
                       </div>
            </div>
            </div>
 </div>

CSS:

* {
margin:0;
}
body {
    width:100%;
    height:100%;
    background:url(../images/one.jpg) no-repeat;
    background-size:100%;
    padding:0px;
    font-family:FuturaStdLight, Futura, Helvetica, Arial, sans-serif;
    font-size:14px;
    color:#fff;
    line-height:120%;
}
.trans {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity:0.70;
    opacity:0.70;
}
#logo {
    width:213px;
    height:105px;
    position:relative;
    background:url(../images/logo.png) no-repeat 0 0;
    white-space:nowrap;
    text-indent:9999px;
    overflow:hidden;
}
#main {
    width:100%;
    height:306px;
    top:50%;
    margin-top:-153px;
    position:absolute;
    overflow: hidden;
}
#trigger_left {
    width:30px;
    height:100%;
    float:right;
    position:relative;
    z-index:2;
}
#trigger_right {
    width:30px;
    height:100%;
    float:left;
    position:relative;
    z-index:2;
}
.arrow_small {
    left:50%;
    top:50%;
    margin-left:-6px;
    margin-top:-12px;
    position:absolute;
}
#slider {
    width:inherit;
    height:inherit;
    top:0;
    right:0;
    float:right;
    position:absolute;
}
#overlay {
    width:inherit;
    height:inherit;
    position:absolute;
}
开发者_开发知识库#content {
    width:inherit;
    height:inherit;
    position:relative;
    z-index:1;
}
#main_nav {
    width:744px;
    margin:0 auto;
    padding:0px 30px 0px 30px;
}
.nav{
    width:208px;
    padding:20px 10px 20px 10px;
    text-align:center;
}
#footer {
    height:12px;
    position:absolute;
    bottom:0;
    right:0;
    padding:0px 40px 40px 0px;
    z-index:1;
}

Javascript:

$(document).ready(function(){
// Hide functions
    $('#slider').css({width: '30px'});
// Navigation drop down menu
    $('#trigger_left').click(function (){
        $('#slider').animate({ width: '100%' }, 1500 );
    });
    $('#trigger_right').click(function (){
        $('#slider').animate({ width: '30px',}, 1500 );
    });     
});

Daniel, I put your question into a jsfiddle, changed the images to blue divs, and put a border around your #slider so I could see what it was doing.

if I understand your question correctly, your code does exactly what you want it to. Check it out: http://jsfiddle.net/nn4sJ/3/

Changed some css, now it works. Used width:100% instead of inherited.

#slider {
    width:100%;
    height:100%;
    top:0;
    right:0;
    float:right;
    position:absolute;
}
#overlay {
    width:100%;
    height:100%;
    position:absolute;
}
#content {
    width:100%;
    height:100%;
    position:relative;
    z-index:1;
}