jquery - サイドバーjQueryを折りたたむときに画像サイズを変更する

Question

初めてコーディングを試みましたが、jsfiddle でコード全体を使用せずに私の質問を提示可能にする方法がわかりませんでした。

html:

<div class="gridContainer clearfix">
  <div id="header">
    <p id="headtitle">
      <button id="switch">Header Button to close Menu</button>
    </p>
  </div>
  <div id="sidebar" class="ui-accordion" style="">

js:

  $(document).ready(function(){

  $("#switch")
  .button()
  .click(function(){

      $("#sidebar").toggle("slide");
  });
});

CSS:

#sidebar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
}
#map {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 66.3003%;
    display: block;
}

私のjsfiddle

サイトが PC モード/大画面の場合、サイドメニューは画像の左側にあります。しかし、折りたたむと、画像が画面全体に表示されます。画像 (マップ) が画面いっぱいになるように、サイドメニューを折りたたむ方法が間違っていませんか? 私のイメージは、希望どおりにサイズ変更するのではなく、左にシフトしているだけです。

dw でスライドを見た後、流動グリッド レイアウトを使用しているため、マップ div が 66.3003% に設定されているため、100% に変更されていないことに気付きました。div の css を 100% に変更することはできますか? レイアウトを流動的なままにしたいので、実際の px サイズは機能しないと思います。