Fixed sidebar overlaps fixed header

Question

Hi I have a header which is fixed position and width 100%, I also have a sidebar which slides out from the left, it is also fixed position. The problem is the sidebar overlaps the header and I want the header to shrink with the sidebar as the sidebar slides out. I thought it would do this naturally because it is set to width 100%. However it doesn't.

Any ideas?

Thanks

Header

#header_wrapper{
    width:100%;
    height: 50px;
    /*background-color: #dddddd;*/
    background-color: #2a5f8c;

    border-bottom: 2px solid #ffffff;
    float: left;
    position: fixed;
    z-index: 80;
    border-bottom: 1px solid #444444;

}

Sidebar

#category_wrapper{
    width: 200px;
    height: 100%;
    position: fixed;
    float: left;
    border-right: 3px solid #333;
    display: none;
}

Jquery

$("#header_category").click(function () {           
  $('#category_wrapper').toggle(200);
});

HTML

<div id="category_wrapper"></div><!--end category_wrapper-->        
<div id="header_wrapper"></div><!--end header_wrapper-->

Answer 1

Rather then setting the width of the header to 100% you could set the left property to 0px and the right property to 0px and then when the menu slides out you could just animate the left property to the width of the left menu, and then when it goes back animate it back to zero.

example of animate:

$( "#category_wrapper" ).animate({
    left: 200,
  }, 200, function() {
    // Animation complete.
  });