How do I create a fixed position sidebar for my Wordpress project

I am building a Wordpress site with a fixed sidebar menu on the left hand side and the main content on the right within a container. I'm not sure what is best practise for coding the menu because I have currently coded the menu to sit outside of the main container div. I have also noticed for some reason if the desktop screen size is not wide enough my content overflows into the menu on the left and also some of my menu is being cut off at the bottom (some of the links are not visible) I'm not sure if this has anything to do with the height of the screen?

HTML for the menu looks like:

<div id="menuBar">
    <img class="logo" src="wp-content/themes/starkers-master/images/lulu-logoi-01.png" width="180" height="250" alt="Lulu Plews Logo"/>         
     <ul>
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
     </ul>  
</div>

The css is:

.menu-menu-1-container {
  position: fixed;
  left: 8.8%;
  top: 300px;
  border-right: 1px solid #D1D2D4;
  height: 10000px;
}

#menuBar {
    position: fixed;
    left: 8.15%;
    top:0;
    padding: 0 30px 0 0;
    border-right: 1px solid #D1D2D4;
    margin: 0 auto 0 auto;
}

I just want some advice as to how I should code this and whether or not there is something wrong with my code? I think it is missing something obvious but I don't know what it could be?

Solution

I figured out the solution to my problem; I did not realise at the time that using position: fixed; on an element takes it out of flow.

First of all unknowingly I added position:fixed; to the parent element > .menu-menu-1-container which was not required and did not help in anyway. I also removed all the other styles from this div as they were redundant.

Secondly I rectified the styles on #menuBar; I added a height of 100% to it and removed margin:0 auto; (which was doing nothing as I had not declared a width, also it did not need to be centered so this was redundant). I then added a width to #menuBar and removed the left style attribute.

Thirdly I found it to be correct to have the fixed sidebar outside of the main container div and styled the main container div with left margin and padding.

Here is a link to a fiddle with all my code and a snippet of my CSS is below:

#menuBar {
    position: fixed;
    width: 150px;
    background-color: #DDD; 
    font-size: 18px;
    top: 0;
    bottom: 0;
    border-right: 1px solid #D1D2D4;   
}

#menuBar a {
  display:block;
  padding:15px;
  color: #000;
  text-decoration: none;
}
.content {
  position: relative;            
  margin-left: 200px;
}

Hope it helps anyone else struggling with something as simple as a fixed position sidebar.