Get good width available (scrollbar) on my browser

Get good width available (scrollbar) on my browser

I have 2 animations in jQuery, on is a horizontal to left slide and the
second is a fading. My first animation have to slide at the margin-left
than the container of the fading animation, but the fading animation
container do make scrollbar on my browser so when i get size for calculate
where slide the first animation, i get a wrong width (without the
scroolbar size).

How can is get the really good with available for my animation ?
HTML
<!-- login area -->
<div class="menu_login">
<div class="container">
<span id="title_login">Connexion</span>
<input id="email" name="name" type="email" class="login"
value="Identifiant (e-mail)" />
<input id="pw" name="passwd" type="password" class="login"
value="Mot de passe" />
<img id="log_btn" src="~/Content/img/btn_ok.png" alt="ok" />
<div class="login_action">
<a href="#">Mot de passe oublié</a><br />
<a href="#">Changer de mot de passe</a>
</div>
</div>
</div>
<div class="register_login">
<span id="create_login">INSCRIPTION</span>
</div>
<div id="login_tool" rel="close">
<div class="container">
//login form
</div>
</div>
CSS
div.container {
margin: auto;
width: 1024px;
border:pink 1px dashed;
}
.login_action a {
font-size: 13px;
text-transform: none;
color:#31b8f5;
padding-left: 24px;
}
.register_login {
float: right;
padding: 26px 0px 0px 0px;
display: block;
line-height:24px;
height: 56px;
background-image: linear-gradient(top, #31b8f5, #2ba1d6);
background-image: -webkit-linear-gradient(#31b8f5, #2ba1d6);
background-image: -moz-linear-gradient(#31b8f5, #2ba1d6);
background-image: -ms-linear-gradient(#31b8f5, #2ba1d6);
background-image: -o-linear-gradient(#31b8f5, #2ba1d6);
cursor:pointer;
margin-top: -82px;
}
.register_login span{
color: #fff;
font-size: 30px;
font-family: 'CondLight';
text-transform: uppercase;
}
#login_tool {
height: 0%;
display: block;
padding:0px;
margin:0px;
}
#login_tool .container {
height: 100%;
background-image: url('./img/bg_selectedMySheet.jpg');
}
JavaScript
$('.register_login').click(function (e) {
if ($("#login_tool").attr('rel') == 'close') {
$("#login_tool").animate({ height: "170px" }, { duration:
400, queue: false });
// $("#login_tool").children('div').css("width"
,(document.body.clientWidth - marginLeft) + "px");
$("#login_tool").children('div').fadeIn({ duration: 300,
queue: false });
$("#login_tool").attr('rel', 'open');
$('.login_action').css("display", "none");
$(".register_login").animate({ "width": (1024 +
marginLeft) + "px" }, { duration: 300, queue: false });
console.log("$('.container').offset().left " +
$('.container').offset().left);
console.log("$('.register_login').offset().left " +
$('.register_login').offset().left);
console.log(($(".register_login").offset().left !=
$('.container').offset().left));
if ($(".register_login").offset().left !=
$('.container').offset().left) {
$(".register_login").css("width", (1016 + marginLeft)
+ "px");
}
console.log('opening');
}
else {
$("#login_tool").animate({ height: "0px" }, { duration:
300, queue: false });
$("#login_tool").children('div').fadeOut({ duration: 300,
queue: false });
$("#login_tool").attr('rel', 'close');
$('.login_action').fadeIn({ duration: 300, queue: false });
$(".register_login").animate({ width:
$('.container').offset().left + 160 + "px" }, { duration:
300, queue: false });
console.log('closing');
}
marginLeft = ((document.body.clientWidth - 1024) / 2);
});