问题是在父母中将div定位在彼此旁边

Question

基本上我正在尝试做类似以下的事情。包含2 div's的容器当然是contentmain。

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

我现在遇到的问题是由于某种原因，更新在整个宽度上蔓延。还值得注意的事情。所有这些都在名为div的另一个contain内。以下是所涉及的所有代码。我想我的问题是如何在保证contain的背景扩展内容的同时实现上述图表？

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

一个主要问题是你在html中拥有类updates的元素，但在CSS中你设置了标识为updates的元素：#updates。

当您不确定样式发生了什么时，请尝试在firebug中选择元素并检查应用于它的样式。在这里你会看到.updates没有 我发现“点击要检查的页面中的元素”选项特别有用：