title: Need help positioning these divs...
body: <p>I'm making a "get a link from the site box" but I can't seem to position these divs correctly. For the most part they are correct but I would like the title dead in the center, the "get a link" button to line up with the search box and for the search box to be more to the right. I've been fiddling with these for about 45 minutes and researching positioning on w3 but I just can't get it. Any pointers will be helpful.</p>
  
  <p>Heres the jsfiddle</p>
  
  <p><a href="https://jsfiddle.net/j6pf08kn/1/" rel="nofollow">https://jsfiddle.net/j6pf08kn/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="top_con"&gt;
          &lt;div id="title_con"&gt;
              &lt;a href="swfs/welcomeflash.swf" id="downLink" download="welcomeflash"&gt;
                  &lt;header id="title"&gt;
                      Diff Lirl
                  &lt;/header&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="share_con"&gt;
              &lt;button id="share"&gt;Get a link!&lt;/button&gt;
              &lt;textarea id="link"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      height: 100%;
  }
  
  body {
      background-color: black;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  header {
      margin: 0 auto;
  }
  
  #top_con {
      width: 100%;
      display: inline-block;
  }
  
  #share_con {
      float: right;
      width: 40%;
      display: inline-block;
  }
  
  #link {
      width: 50%;
      resize: none;
      margin-top: 3%;
  }
  
  #share {}
  
  #title_con {
      width: 57%;
      float: center;
      display: inline-block;
  }
  
  #title {
      font-family: "Arial Black", Gadget, sans-serif;
      font-size: 48px;
      text-align: right;
      color: white;
      cursor: pointer;
  }
  
  a {
      text-decoration: none;
      color: white;
  }
  </code></pre>