title: css for display map in div tag
body: <p>I want to place the map between address and contact us form.Now map is displayed
  above the contact form. <code></code><a href="http://jsfiddle.net/Lc965o5d/" rel="nofollow noreferrer">Demo</a></p>
  
  <p><img src="https://i.stack.imgur.com/ndH6J.png" alt="enter image description here"></p>
  
  <p>I want to display map 'm' between address 'A' and contact form 'c'.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
   body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: #82CAFA;
    font: normal 12px/1.5em"Liberation sans", Arial, Helvetica, sans-serif;
    background: #f3f3f3 url(../images/) repeat-x center top;
    background-color: #E3F2FF;
  }
  html,
  .main {
    padding: 0;
    margin: 0;
  }
  .main {
    background: url(../images/header_bg.jpg) no-repeat center top;
  }
  .clr {
    clear: both;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 0;
    line-height: 0;
  }
  h2 {
    margin: 8px 0;
    padding: 8px 0;
    font-size: 26px;
    font-weight: normal;
    color: #343537;
    text-transform: uppercase;
    border-bottom: 2px solid #c8c8c8;
  }
  p {
    margin: 8px 0;
    padding: 0 0 8px 0;
  }
  a {
    color: #3183bf;
    text-decoration: underline;
  }
  .header,
  .content,
  .menu_nav,
  .fbg,
  .footer,
  form,
  ol,
  ol li,
  ul,
  .content .mainbar,
  .content .sidebar {
    margin: 0;
    padding: 0;
  }
  .header {} .header_resize {
    margin: 0 auto;
    padding: 0;
    width: 960px;
  }
  .logo {
    padding: 0 0 0 20px;
    float: none;
    float: left;
    width: auto;
    height: 104px;
  }
  h1 {
    margin: 0;
    padding: 24px 0 0;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2em;
    text-transform: none;
    letter-spacing: 1px;
  }
  h1 a,
  h1 a:hover {
    color: #efeeee;
    text-decoration: none;
  }
  h1 span {} h1 small {
    display: block;
    font-size: 13px;
    line-height: 1.2em;
    letter-spacing: normal;
    text-transform: none;
    color: #efeeee;
  }
  .menu_nav {
    margin: 0;
    padding: 11px 0 0 24px;
    height: 45px;
  }
  .menu_nav ul {
    list-style: none;
    padding: 0;
    height: 50px;
    float: left;
  }
  .menu_nav ul li {
    margin: 0;
    padding: 7px;
    2px 0 0;
    float: left;
    background: url(../images/split.gif) no-repeat right center;
  }
  .menu_nav ul li a {
    display: block;
    margin: 0;
    padding: 7px 24px;
    font-size: 14px;
    line-height: 19px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
  }
  .menu_nav ul li.active a,
  .menu_nav ul li a:hover {
    text-decoration: none;
    color: #fff;
  }
  .slider {
    margin: 0 0 20px;
    padding: 10px;
    background: #fff;
  }
  .content {
    padding: 0px;
  }
  .content_resize {
    margin: 0 auto;
    padding: 24px 0 40px;
    width: 960px;
  }
  .content .mainbar {
    margin: 0;
    padding: 0;
    float: right;
    width: 300px;
  }
  .content .mainbar h2 {
    margin-bottom: 0;
    padding-bottom: 8px;
    font-size: 26px;
    line-height: 1.2em;
    color: #212121;
  }
  .content .mainbar div.img {
    padding: 0 0 12px;
    float: left;
  }
  .content .mainbar img {} .content .mainbar img.fl {
    margin: 0;
    border: 1px solid #dedede;
  }
  .content .mainbar .article {
    margin: 0 0 80px;
    padding: 6px 20px;
  }
  .content .mainbar .post_content {} .content .mainbar .post_content strong {
    color: #6d6d6d;
  }
  .content .sidebar {
    padding: 0;
    float: left;
    width: 260px;
  }
  .content .sidebar .gadget {
    margin: 0 0 12px;
    padding: 6px 20px 24px;
  }
  .content .sidebar h2 {
    color: #212121;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
  
    &lt;div class="content_resize"&gt;
  
      &lt;div class="mainbar"&gt;
        &lt;div id="map-canvas" style="width:500px;height:350px;border:1px solid black;"&gt;&lt;/div&gt;
        &lt;div class="demo"&gt;
  
          &lt;h3 style="color:black;"&gt;Contuct Us&lt;/h3&gt;
          &lt;form method="POST" autocomplete="off"&gt;
            &lt;div&gt;
              &lt;input type="text" name="name" placeholder="NAME" required&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div&gt;
              &lt;input type="text" name="email" id="email" placeholder="E-MAIL" onblur="javascript:myFunction(this.value);" required&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div&gt;&lt;span id="error" style="color: Red; display: none"&gt;&lt;/span&gt;
              &lt;input type="text" name="phone" placeholder="phone" onkeypress="return IsNumeric(event);" ondrop="return false;"&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div&gt;
              &lt;textarea name="message" placeholder="MESSAGE" required&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;div&gt;
              &lt;input type="submit" name="send" value="SEND"&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  
          &lt;div class="clr"&gt;&lt;/div&gt;
  
          &lt;div class="post_content"&gt;
  
  
  
          &lt;/div&gt;
          &lt;div class="clr"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="sidebar"&gt;
        &lt;div class="demo"&gt;
          &lt;h4 class="star"&gt;&lt;span&gt;sample&lt;/span&gt;Technologies&lt;/h4&gt;
          &lt;div class="clr"&gt;&lt;/div&gt;
          &lt;p&gt;
            No 242, VR STREET,
            &lt;br&gt;address,
            &lt;br&gt;address1,
            &lt;br&gt;area,
            &lt;br&gt;sample.
            &lt;br&gt;
            &lt;br&gt;info@sample.com
  
  
            &lt;br&gt;Tel: 9995432702,9942564712
            &lt;br&gt;
          &lt;/p&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="clr"&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>