title: How can I take this two divs one centre and other top right?
body: <p>How can I take this two divs one centre and other top right? I can manage to to take them but the second div which is "top" comes under right the first div which is "kng". What am I doing wrong? Explanation would be welcomed..thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#smedia {
    margin-left: 30px;
  }
  
  #smedia a:link {
    text-decoration: none;
    font-color: black;
  }
  
  #header a {
    text-decoration: none;
    color: black;
  }
  
  #fb {
    height: 23px;
  }
  
  .top {
    float: right;
  }
  
  #kng {
    display: table;
    margin: 0 auto;
  }
  
  #kng img {
    height: 150px;
  }
  
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="kng"&gt;
    &lt;img src="img/kng.jpg"&gt;
  &lt;/div&gt;
  &lt;div class="top"&gt;
    &lt;div id="header"&gt;
      &lt;a href="#"&gt; Sign in&lt;/a&gt; |
      &lt;a href="signup.php"&gt; Sign up &lt;/a&gt; |
      &lt;a href="#"&gt; Help &lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="smedia"&gt;
      &lt;a href="https://www.facebook.com"&gt;&lt;img src="http://www.ransomesjacobsen.com/themes/jacobsen/images/icons/facebook-icon-small.png" alt="facebook" id="fb"&gt; &lt;/a&gt;
      &lt;a href="https://www.twitter.com"&gt; &lt;img src="http://www.freeiconspng.com/_img/icon-top-twitter.png" alt="twitter" id="tw"&gt;&lt;/a&gt;
      &lt;a href="https://www.instagram.com"&gt; &lt;img src="http://dunedin.art.museum/templates/dpag/images/instagram-icon.png" alt="instagram" id="ins"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="search"&gt;
      &lt;input type="text" name="search" placeholder="Search.."&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>