Problem positioning div's next to each other within a parent

Question

Basically I'm attempting to do something like the following. The container containing the 2 div's is of course contentmain.

 --------|-------
 |       |      |
 |       |      |
 |updates|tweet |
 |       |      |
 |       |      |
 |       |      |
 |_______|______|

There problem I'm having right now is updates is sprawling across the entire width for some reason. Also something worthy of note. All of this is inside another div called contain. Below is all the code involved. I guess my question would be how do I achieve the above diagram while insuring that contain's background expands over the content?

HTML

           <div id="contentmain">
        <br/>
            <div class="updates">
                <div id="banner"> Update: 31/12/10</div>
            <p> Content </p>
                <div id="banner"> Update: 31/12/10</div>
            <p> content2 </p>
            </div>
                <div class="tweet"> </div>
            <br/>
    </div> 

CSS

    #contentmain { 
width: 800px;
overflow: hidden;
margin-left: auto;
margin-right:auto;
    }

    #updates {
width: 400px;
float: left;
margin-left: auto;
margin-right:auto;
    }

    .tweet .tweet_list, .query .tweet_list {
-webkit-border-radius: .5em;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #D8D8D8; 
}
.tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic {
  text-transform: uppercase; }
.tweet .tweet_list li, .query .tweet_list li {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0; 
    }
  .tweet .tweet_list li a, .query .tweet_list li a {
    color: #0C717A;
    padding: 0px;
    }
.tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {
  background-color: #D8D8D8; }
.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
  padding-right: 5px; }
  .tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {
    vertical-align: middle; 
    }

    #contain {
background-color:#FFFFFF;
width: 800px;
margin-left: auto ;
margin-right: auto ;
padding: 7px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
    }

Answer 1

One major problem is that you have element with class updates in html, but in CSS you style element with id updates: #updates.

When you're not sure what's going on with styles, try selecting the element in firebug and inspecting styles applied to it. Here you would see that .updates have none.
I find 'click the element in the page to inspect' option particularly useful: