2010-12-31 7 views
0

基本的に私は次のようなことを試みています。 2 div'sを含む容器はもちろんcontentmainである。問題のあるdivが親の中で隣り合わせに配置されている

--------|------- 
|  |  | 
|  |  | 
|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; 
    } 

答えて

1

一つの大きな問題は、HTML内のクラスupdatesを持つ要素を持っているということですが、CSSであなたのid updatesとスタイル要素:#updates

スタイルで何が起こっているのかわからないときは、ファイヤーバグの要素を選択し、それに適用されているスタイルを調べてみてください。ここには、.updatesがないことがわかります。
「検査するページの要素をクリックしてください」というオプションが特に便利です:alt text

+0

doh!それは問題だった:)感謝.. ugh ..永遠に過ごした..とてもシンプル。 – Skizit

+1

@Ulkmun Firebugを使用すると、時間が大幅に節約できます:) –

関連する問題