Question

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.

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.

I am using HTML5 and CSS3 in order to build the website.

Thanks for any help you can offer.

EDIT
Below is the HTML Code

<div id="feedContainer">
    Latest Tech News<br /><
    The quick brown<br/> fox jumped over the lazy<br /><br />dogs back
 </div>
 <div id="bodyIndex">
     Hi I am a body<br />and i am a new line<br/>r />and i am a <strong>another new line</strong><br />I'm another<br /><br />woo!!<br /><br />
     <font size="+24">I am a large font<br /><br />Please don't move<br />the feed container
               </font>
        </div>

Below is the CSS 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;
}

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

Answer 1

Try putting the containers into a <ul> and give the float left css property to the <li> within the unsorted list. Something like this:

<ul>
   <li style="float:left"> <!--Container here-->
   </li>
   <li style="float:left"> <!--Container here-->
   </li>
</ul>

That way the containers should appear side by side