title: How can I create a responsive side menu layout
body: <p>here is the link to the site ( <a href="http://pavilioncreative.com/" rel="nofollow">http://pavilioncreative.com/</a> ) hit refresh if you don't see a fullscreen gif as the background.</p>
  
  <p>Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.</p>
  
  <p>I think I might be going about it all wrong ?</p>
  
  <pre><code>    &lt;html lang="en"&gt;
  
      &lt;head&gt;
  
      &lt;title&gt;FirstPage&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link rel="stylesheet" href="css/reset.css" &gt;
      &lt;link rel="stylesheet" href="css/text.css" &gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'&gt;
  
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
  &lt;div class="wraper"&gt;
  
          &lt;ul&gt;
  
      &lt;li class="menu" &gt;
  
              &lt;div class="menu_tab_wrap"&gt;
  
       &lt;div class="menu_tab"&gt;
  
           &lt;div class="menu_off_wrap"&gt;
  
           &lt;div class="menu_off"&gt;
  
               &lt;div class="barOne"&gt;&lt;/div&gt;
               &lt;div class="spacer"&gt;&lt;/div&gt;
               &lt;div class="barTwo"&gt;&lt;/div&gt;
               &lt;div class="spacer"&gt;&lt;/div&gt;
               &lt;div class="barThree"&gt;&lt;/div&gt;
  
           &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  
       &lt;/div&gt; 
  
       &lt;/div&gt;
  
       &lt;div class="menu_tab_wrap_on"&gt;
  
       &lt;div class="menu_tab_on"&gt;
  
           &lt;div class="menu_on_wrap"&gt;
  
           &lt;div class="menu_on"&gt;
  
               &lt;div class="cross"&gt;&lt;/div&gt;
  
  
           &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  
       &lt;/div&gt; 
  
       &lt;/div&gt;
  
       &lt;div class="logo_wrap"&gt;
  
              &lt;div class="logo"&gt;
  
                  &lt;img src="img/logo.svg"&gt;
  
              &lt;/div&gt;
  
           &lt;/div&gt;
  
  
              &lt;/li&gt;
  
                &lt;section id="menu_out"&gt;
  
           &lt;div class="menu_inner_wrap"&gt;
  
           &lt;div class="menu_list"&gt;
  
           &lt;ul class="menu_ul"&gt;
  
               &lt;li class="menu_li"&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
               &lt;span class="in_lable"&gt;Back to the home page&lt;/span&gt;
               &lt;li class="menu_li"&gt; &lt;a href="#"&gt;About&lt;/a&gt; &lt;/li&gt;
               &lt;span class="in_lable"&gt;Find out more about me&lt;/span&gt;
               &lt;li class="menu_li"&gt; &lt;a href="#"&gt;Portfolio&lt;/a&gt; &lt;/li&gt;
               &lt;span class="in_lable"&gt;Take a look at my past work&lt;/span&gt;
               &lt;li class="menu_li"&gt; &lt;a href="#"&gt;Contact Me&lt;/a&gt; &lt;/li&gt;
               &lt;span class="in_lable"&gt;Get in contact with me&lt;/span&gt;
  
          &lt;/ul&gt;
  
           &lt;/div&gt;
  
  
  
               &lt;/div&gt;
  
       &lt;/section&gt;
  
      &lt;li class="content"&gt;
          &lt;div class="content_wrap"&gt;
  
              &lt;h1&gt;test&lt;/h1&gt;
              &lt;/div&gt;
              &lt;/li&gt;
  
  
      &lt;/ul&gt;
  
  
  
          &lt;/div&gt;
  
  
          &lt;script type="text/javascript"&gt;
  
  
  
          $(document).ready(function () {
  
      var hoverIn = false; //You need this counter to detect whether animate occurs.
  $(".menu_tab").hover(function() {
      if (hoverIn)return; //if the hover is activated, it stops the function
  
    //I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
    $(".barOne").stop(true, true).animate({
      "bottom": "+=5px"
    }, "fast");
    $(".barThree").stop(true, true).animate({
      "top": "+=5px"
    }, "fast");
    hoverIn = true;
  }, function() {
      if (!hoverIn)return; //if the hover is deactivated, it stops this function
    $(".barOne").stop(true, true).animate({
      "bottom": "-=5px"
    }, 300);
    $(".barThree").stop(true, true).animate({
      "top": "-=5px"
    }, 300);
    hoverIn = false;
  });
  
              });
  
  
  
  
  
  
  
  
  
  
  
         $(document).ready(function () {
  
          if($(window).width() &gt; 700) {
               $(".menu_tab").click(function(){
               $("#menu_out").animate({"width": "30em"}, "slow");
               $(".menu_tab_wrap_on").stop().fadeIn();
               $(".menu_list").stop().delay( 400 ).fadeIn('slow');
  
              });
  
          }else{
  
               $(".menu_tab").click(function(){
               $("#menu_out").animate({"width": "100%"}, "slow");
               $(".menu_tab_wrap_on").stop().fadeIn();
               $(".menu_list").stop().delay( 400 ).fadeIn('slow');
  
  
              });
  
          }
  
                  });
  
  
         $(document).ready(function () {
  
               $(".menu_tab_wrap_on").click(function(){
               $(".menu_tab_wrap_on").stop().hide('fast');
               $("#menu_out").animate({"width": "0em"}, "slow");
               $(".menu_list").stop().hide();
              });
  
                  });
  
  
  
  
  
  
  
  
  
  
  
     &lt;/script&gt;
  
      &lt;/body&gt;
  
  
  &lt;/html&gt;
  
  
  
  
  html{
  
      -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
  
  }
  
  .wraper{
  
      width: 100%;
      margin: auto;
      padding: 0;
  
  }
  
  
  .wraper ul{
  
      width: 100%;
      margin: 0 auto;
      padding: 0;
  
  }
  
  .wraper ul li{
  
      padding: 0;
      margin: 0 auto;
      display: inline-block;
  
  }
  
  .wraper ul .menu{
  
      width: 7%;
      min-width: 7em;
      max-width: 7em;
      background: black;
      height: 100%;
      position: fixed;
      z-index: 20;
      float: left;
  
  
  }
  
  
  .wraper ul .content{
  
      background-color: blue;
      width: 93%;
      height: 70em;
      float: right;
  
  }
  
  .wraper ul .content .content_wrap{
  
      width: 80%;
      margin: auto;
      text-align: center;
      border: red solid 1px;
  
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .menu .menu_tab_wrap{
  
      position: relative;
  
  }
  
  .menu .menu_tab{
  
      width: 100%;
      background-color: #232323;
      height: 6em;
      display: table;
      position: absolute;
      width: 100%;
      cursor: pointer;
  }
  
  
  
  .menu .menu_tab .menu_off_wrap {
      width: 100%;
      height: 100%;
      display: table-cell;
      vertical-align: middle;
  
  
  
  }
  
  .menu .menu_tab .menu_off_wrap .menu_off{
  
     margin-left: auto;
      margin-right: auto; 
      position: relative;
  
  
  
  }
  
  
  
  
  
  .menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
  
      width: 3em;
    padding: 2px;
    background-color: white;
      margin: auto;
      position: relative;
  
  
  }
  
  .menu .menu_tab .menu_off_wrap .menu_off .spacer{
  
      width: 5em;
      height: 5px;
  
  
  }
  
  
  
  .menu .menu_tab_wrap_on{
  
      position: relative;
      display: none;
  
  
  
  
  
  }
  
  .menu .menu_tab_wrap_on .menu_tab_on{
  
      width: 100%;
      background-color: white;
      height: 6em;
      display: table;
      position: absolute;
      width: 100%;
      cursor: pointer;
  }
  
  
  
  .menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
      width: 100%;
      height: 100%;
      display: table-cell;
      vertical-align: middle;
  
  
  
  }
  
  .menu .menu_tab_on .menu_on_wrap .menu_on{
  
     margin-left: auto;
      margin-right: auto; 
      position: relative;
      text-align: center;
  
  
  
  }
  
  
  
  
  
  .menu .menu_tab_on .menu_on_wrap .menu_on .cross{
  
  
    width: 3em;
    height: 3em;
  
    color: #232323;
    margin: auto;
    position: relative;
  
  }
  
  
  
  
  .cross:before, .cross:after {
    position: absolute;
  
    content: ' ';
    height: 3em;
    width: 4px;
    background-color: #333;
  }
  .cross:before {
    transform: rotate(45deg);
  }
  .cross:after {
    transform: rotate(-45deg);
  }
  
  
  
  .menu .logo_wrap{
  
      width: 100%;
      text-align: center;
  
  
  }
  
  .menu .logo_wrap .logo{
  
      width: 7em;
     margin: auto;
      position:absolute;
     bottom:0;
      padding-bottom: 2em;
  
  }
  
  .menu .logo_wrap .logo img{
  
      width: 70%;
      height: auto;
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  #menu_out{
  
      background-color: #232323;
      height: 100%;
      width: 0em;
      position: fixed;
      z-index: -1;
  
      overflow-y:scroll;
      overflow-x:hidden;
      border-right: 0.5em black solid;
      z-index: 10;
  
  
  }
  
  
  #menu_out .menu_inner_wrap{
  
      position: relative;
  
  
  
  }
  
  
  #menu_out .menu_list{
  
      width: 70%;
      height: auto;
      margin: auto;
      padding-top: 5em;
      padding-bottom: 0em;
      display: none;
      position: relative;
  
  
  }
  
  
  #menu_out .menu_list .menu_ul{
  
      padding: 0;
      margin: 0 auto;
      width: 100%;
      padding-left: 4em;
      padding-bottom: 2em;
  
  
  
  }
  
  #menu_out .menu_list .menu_ul .menu_li{
  
      display: block;
      padding: 0;
      margin: 0 auto;
  
  
  }
  
  #menu_out .menu_list .menu_ul .menu_li a{
  
      font-size: 40px;
      color: white;
      text-decoration: none;
      font-family: 'Lora', serif;
      font-weight: 700;
      opacity: 0.8;
  
  
  }
  
  
  #menu_out .menu_list .menu_ul .menu_li a:hover{
  
      opacity: 1;
  
  }
  
  
  #menu_out .menu_list .menu_ul .in_lable{
  
      font-size: 15px;
      color: #80E577;
      font-weight: 100;
      font-family: 'Open Sans', sans-serif;
      position: relative;
      bottom: 10px;;
  
  
  }
  
  
  #menu_out .menu_inner_wrap .footer{
  
      width: 100%;
  
      margin: auto;
  
      position:absolute;
     bottom:0;
      height: 10em;
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @media only screen and (max-width: 800px) {
  
      .wraper ul .content{
  
      background-color: blue;
      width: 90%;
      height: 70em;
      float: right;
  
  }
  
  
  }
  
  
  
  
  @media only screen and (max-width: 700px) {
  
    .wraper ul .content{
  
      background-color: blue;
      width: 100%;
      height: 70em;
      float: none;
  
  }
  
      .wraper ul .menu{
  
      width: 100%;
      min-width: none;
      max-width: none;
      height: 5em;
  
  
  
  }
  
  
      .menu .menu_tab{
  
  
      height: 100%;
      display: table;
      position: absolute;
      width: 6em;
      cursor: pointer;
          right: 0;
  }
  
  
  
      .menu .logo_wrap{
  
      width: 100%;
      text-align: center;
  
  
  
  }
  
  .menu .logo_wrap .logo{
  
      width: 7em;
     margin: auto;
      position:absolute;
     bottom:0;
  
      padding-top: 1em;
          padding-bottom: 1em;
  
  }
  
  
      .menu .menu_tab_wrap_on .menu_tab_on{
  
      width: 6em;
  
      height: 100%;
  
      right: 0;
      }
  
  
  
      #menu_out .menu_list{
  
      width: 100%;
      height: auto;
      margin: auto;
      padding-top: 8em;
      text-align: center;
  
  
  
  }
  
      #menu_out .menu_list .menu_ul{
  
      padding: 0;
      margin: 0 auto;
      width: 100%;
      padding-left: 0em;
          text-align: center;
  
  }
  
  
      #menu_out .menu_list .menu_ul .menu_li a{
  
      font-size: 35px;
      color: white;
      text-decoration: none;
      font-family: 'Lora', serif;
      font-weight: 700;
  
  }
  
  
  #menu_out .menu_list .menu_ul .menu_li a .in_lable{
  
      font-size: 10px;
      color: #80E577;
      font-family: 'Open Sans', sans-serif;
      font-weight: 100;
  
  }
  
  
      #menu_out{
  
         width: 0; 
          border-right: none;
  
      }
  
  
  
  }
  </code></pre>