DIV position ? alignment

Posted: asked May 19 at 11:33 - Source : stackoverflow

I'm trying to show the page like this. Have to make DIV like this

Current Status

I'm trying to make divs as the first image but current alignment is like 2nd image.

Title and Menu area has to be fixed on the top. Please let me know what I've done wrong...

Here's the html code,

        <div class="menu_wrapper">
          <div class="base menu ttl_bar">
              TITLE
          </div>
          <div class="base menu ttl_big">
               MENU
          </div>
        </div>

          <div class=" map_area">
              MAP AREA
          </div>
          <div class=" contents_area" id="draggable">
            CONTENTS AREA

          </div>

And here is the following CSS

   body{margin: 0; padding:0;}
   div {width:100vw;display: inline-block;}

   .menu_wrapper {position: fixed; top:0; height: auto;}
   .menu {background-color: red; height: 100px; }
   .map_area {background-color: blue; height: 300px;}
   .contents_area {height: 500px;}

   .ttl_bar {position: relative;}
   .ttl_big {position: relative;}

Please help me for figuring out the problem.