title: CSS: Are negative margins needed here?
body: <p>I'm practicing and getting to know how to use CSS. At the moment, I'm building a mock up of a youtube video page. I have 4 divs, one being the side bar, and the only way I can figure out how to get it positioned next to the video div and video-info div is through the use of negative margins. I feel like there is probably a better way, but I can't figure it out.</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>/* nav-bar */
  
  .nav-bar {
    background-color: green;
    height: 70px;
    margin-bottom: 20px;
  }
  /* video */
  
  .video {
    background-color: red;
    height: 360px;
    width: 640px;
    margin: 0 0 15px 100px;
  }
  /* video-info */
  
  .video-info {
    background-color: blue;
    height: 150px;
    width: 640px;
    margin-left: 100px;
  }
  /* sidebar */
  
  .sidebar {
    background-color: black;
    height: 900px;
    width: 416px;
    float: right;
    margin-right: 80px;
    margin-top: -525px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-bar"&gt;
  &lt;/div&gt;
  
  &lt;div class="video"&gt;
  &lt;/div&gt;
  
  &lt;div class="video-info"&gt;
  &lt;/div&gt;
  
  &lt;div class="sidebar"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>