title: Two Relative CSS containers next to each other
body: <p>I am currently trying to develop a website where I need to have 2 CSS containers side by side at the same level. I.e. they both need to have top: 0px; However, whey they both have relative the first container is pushed down to where the second container content finishes. </p>
  
  <p>How can I get these two containers to sit side by side both needing to be relative. I have been trying to figure it out for ages and google searches don't seem to provide with much help.</p>
  
  <p>I am using HTML5 and CSS3 in order to build the website. </p>
  
  <p>Thanks for any help you can offer. </p>
  
  <p><strong>EDIT</strong>
  Below is the HTML Code</p>
  
  <pre><code>&lt;div id="feedContainer"&gt;
      Latest Tech News&lt;br /&gt;&lt;
      The quick brown&lt;br/&gt; fox jumped over the lazy&lt;br /&gt;&lt;br /&gt;dogs back
   &lt;/div&gt;
   &lt;div id="bodyIndex"&gt;
       Hi I am a body&lt;br /&gt;and i am a new line&lt;br/&gt;r /&gt;and i am a &lt;strong&gt;another new line&lt;/strong&gt;&lt;br /&gt;I'm another&lt;br /&gt;&lt;br /&gt;woo!!&lt;br /&gt;&lt;br /&gt;
       &lt;font size="+24"&gt;I am a large font&lt;br /&gt;&lt;br /&gt;Please don't move&lt;br /&gt;the feed container
                 &lt;/font&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Below is the CSS Code</p>
  
  <pre><code>#bodyIndex
  {
     position: relative;
     margin-left: 120px;
     padding-left: 15px;
     padding-top: 5px;
     width: 660px;
     /*padding-bottom: 70px;*/
     /*height: 100%;*/
     /*top: 80px;   */
     /*background-color: #c8c8c8;*/
     background-color: #fff6d1;
     /*clear: both;*/
     clear:none;
     padding-bottom: 60px;
     min-height: 100%;
     height: auto;
  }
  
  
  #feedContainer
  {
      position:relative;
  /*    top: 0px;*/
      top: 0px;
      bottom: 0;
      width: 180px;
      padding-left: 5px;
      left: 800px;
      font-size: larger;
      font-weight: bold;
      color: black;
      border-left:thin solid #e0e0e0;
      clear: none;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/7IENk.png" alt="Screenshot of CSS containers"></p>
  
  <p>In the image above where it says 'I am a body' and 'Latest Tech News' should be lined. The only way I can get them to line up is if I set one of them to absolute but I need both containers to be relative</p>