It seems like I'm trying to achieve something similar to the following diagram. The two div elements are contained in a larger container with the class name "contentmain."
--------|-------
| | |
| | |
|updates|tweet |
| | |
| | |
| | |
|_______|______|
The issue I am facing right now is that the "updates" section is stretching across the entire width inexplicably. Another important point to mention is that all of this is enclosed within another div labeled as "contain." Below you will find all the code snippets involved. My main question would be how can I replicate the above structure while making sure that the background of "contain" 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;
}