title: How to make my CSS responsive
body: <p>He I am working on a standard template for my applications. I suck in CSS and I have a headache working on making a good responsive design.</p>
  
  <p>Now this is my idea:</p>
  
  <p><img src="https://i.stack.imgur.com/2rhye.png" alt="enter image description here"></p>
  
  <p>This is how it works out:</p>
  
  <p><a href="http://paperboat.tk/dev/webapplicatie/2.3/" rel="nofollow noreferrer">demo</a></p>
  
  <p>Now with some java-script I can probably do this but if this is possible in CSS it would be nice. My question is how can I make my design with just HTML and CSS.</p>
  
  <p>A jsFiddle just fore fun:</p>
  
  <p><a href="http://jsfiddle.net/y3Xus/1/" rel="nofollow noreferrer">jsFiddle</a> </p>
  
  <p>My css:</p>
  
  <pre><code>body{
      font-family:"Trebuchet MS",sans-serif;
      padding:0px;
      margin:0px;
  }
  
  #content{
      min-height: 100%;
      width: 100%;
      position: absolute;
      background-color: #5adc23;
  }
  
  input[type="button"]{
      border:2px outset rgb(166, 166, 166);
      display:inline-block;
  }
  
  input[type="button"]:hover{
      border:2px inset rgb(166, 166, 166);
      display:inline-block;
      cursor: pointer;
  }
  
  #mainbar{
      height: 31px;
      background-color: rgb(109, 164, 227);
      background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%);
  }
  
      #mainbar_border{
          height: 100%;
          border-bottom:1px solid rgb(0, 0, 0);
          color: rgb(255, 255, 255); 
          font-family: 'Courier New', serif; 
          font-size: 21px; 
      }
  
  #mainmenu{
      width: 40px;
      height: 96%;
      min-height: 100%;
      margin-top: 0px;
      margin-bottom: 0px;
      float: left;
  }
  
      #mainmenu_border{
          height: 99%;
          padding: 4px;
          padding-top: 46px;
          padding-bottom: 19px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-bottom-style: solid;
          border-left-style: solid;
      }
  
          #mainmenu_item_container{
              list-style-type:none;
          }
  
  #content_app{
      float: left;
      width: 88%;
      height: 96%;
  }
  
      #content_app_border{
          height: 99%;
          padding: 4px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-bottom-style: solid;
          border-left-style: solid;
          border-right-width: 1px;
          border-right-style: solid;
      }
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div id='content' class='invoer'&gt;    
      &lt;div id='mainbar'&gt;
          &lt;div id='mainbar_border'&gt;
              Mainbar
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='mainmenu'&gt;
          &lt;div id='mainmenu_border'&gt;
              &lt;ul id='mainmenu_item_container'&gt;
                  &lt;li&gt;&lt;input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /&gt;&lt;/li&gt;
                  &lt;li&gt;button&lt;/li&gt;
                  &lt;li&gt;button&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='content_app'&gt;
          &lt;div id='content_app_border'&gt;
              content
              &lt;br&gt;
                  &lt;br&gt;
                      &lt;br&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>