title: Position Google Maps with sidebar on right and fixed header on top
body: <p>I'm looking to position a Google Maps div with a sidebar on the right that displays listings. I want to make it so the window doesn't scroll, and the contents on the page are fluid when resizing the screen. </p>
  
  <p>I have previously attempted to use box-sizing like the following:</p>
  
  <pre><code>    #map-wrapper * {
       box-sizing: border-box !important;
       -moz-box-sizing: border-box !important;
       -khtml-box-sizing: border-box !important;
       -webkit-box-sizing: border-box !important;
       -ms-box-sizing: border-box !important;
      }
      #map-container {
       position: absolute;
       width: 100%; height: 100%;
       margin: 0;
       overflow: hidden;
       border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
      }
  </code></pre>
  
  <p>This starts to become a nightmare when trying to have a scrolling list in the sidebar. Does anyone have a good solution, or am I on the right track with box-sizing? </p>