title: How to create fixed to screen layout
body: <p>I want to create layout like on image below:</p>
  
  <p>IMAGE <img src="https://i.stack.imgur.com/YVIWH.png" alt="http://i.stack.imgur.com/YVIWH.png"></p>
  
  <p>I'm try to do this here: <a href="http://jsbin.com/EVEWOta/38" rel="nofollow noreferrer">http://jsbin.com/EVEWOta/38</a> but I have problems with map and with other dimension... I cant put map on 100% x 100% and also sidebar is big problem</p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    #main {
      position:absolute;
      top:0px;
      left:0px;
      margin:auto;
      width:100%;
      height:100%;
      background:red;
      display:none;
  
    }
    #header {
      width:100%;
      height:50px;
      background: #4096ee; /* Old browsers */
  background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* IE10+ */
  background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
  
      margin:auto;
  }
    #middle {
      background:green;
      width:100%;
    }
    #side_bar {
      background:#ccc;
      width:350px;
      height:400px;
      float:left;
  
    }
    #map {
      background:yellow;
      width:999px;
      height:400px;
      display:block;
      float:left;
  
    }
    #bottom {
      position:fixed;
      bottom:0;
      background:yellowgreen;
      height:100px;
      width:100%;
    }
  
  #firstPage {
      margin:auto;
      height:100%;
      width:100%;
      z-index:2;
  }
  #left {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      width:50%;
      height:100%;
      -webkit-transition: all 1s ease-in 1s;
      -moz-transition: all 1s ease-in 1s;
      -ms-transition: all 1s ease-in 1s;
      -o-transition: all 1s ease-in 1s;
      transition: all 1s ease-in 1s;
  }
  .right {
  
      background:url('http://31.media.tumblr.com/5828e52a075f36c07be52a9e2cf15583/tumblr_mo4w97RRfe1qelb6lo1_400.jpg') no-repeat;
  }
  .logo {
      font-size:32px;
      font-family:"Arial Black", Gadget, sans-serif;
      color:yellowgreen;
  }
  #firstPage table tr .logo p label {
      font-size: 12px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>So how I must change CSS code to get layout fixed to screen like on image I put above?</p>