2012-02-05 22 views
4

このWebページはDreamweaverではうまく見えますが、どのブラウザでも表示すると、3つの列はwrapper2 idにはありません。それも表示されません。なぜ私は理解できません。divが正しく配置されません。どうして?

これは、ここに私のHTMLコード

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <div id="menu"></div> 
     </div> 
     <div id="wrapper2"> 
      <div id="leftpane"></div> 
      <div id="bodycontent"></div> 
      <div id="rightpane"></div> 
     </div> 
     <div id="footer"></div> 
    </div> 
</body> 

あるCSSが

#wrapper { 
    width: 900px; 
    background-color: #666; 
    margin-right: auto; 
    margin-left: auto; 
} 
#wrapper #header #menu { 
    background-color: #00F; 
    height: 50px; 
    width: 900px; 
    position: relative; 
    top: 150px; 
} 
#wrapper #header { 
    background-image: url(../images/index_03.gif); 
    height: 200px; 
    width: 900px; 
} 
#wrapper2 { 
    position:relative; 
    width:900px; 
    background-color:#999; 
    height:auto; 
} 
#leftpane { 
    width:200px; 
    height:347px; 
    background-color:#C96; 
    left:0px; 
    top:0px; 
    margin:5px; 
    float:left; 
} 
#rightpane { 
    width:200px; 
    height:347px; 
    background-color:#C96; 
    margin:5px; 
    float:right; 

} 
#bodycontent { 
    width:400px; 
    margin:5px; 
    height:347px; 
    background-color:#C96; 
    float:left; 
} 
#footer { 
    width:900px; 
    height:80px; 
    background-color:#0C6; 
} 

誰かがこの上で私を助けることができますでしょうか?

+1

デモ@ http://jsfiddle.netを設定してください。 – PeeHaa

+0

http://jsfiddle.net/mayRY/ - 私が何かを紛失していない限り、実際は大丈夫です。 –

+0

@PeeHaa私は[それを追加しました](http://jsfiddle.net/E7yBJ/1/) - 問題は浮動要素では機能しない 'height:auto;'のように見えます。固定された高さにそれは上品に見えます。 –

答えて

2

見た目から浮かれた#wrapper2要素をクリアしていません。ラッパーを次のように消去してみてください。

#wrapper2:before, #wrapper2:after { 
    content:""; 
    display:table; 
    zoom:1; /* ie fix */ 
} 

#wrapper2:after { 
    clear:both; 
} 
+0

ありがとうございました... Andres Ilich働いて、:) – guitarlass

+0

@guitarlass素晴らしい、回答があなたの質問をクリアした場合は、回答以外のチェックマークを使用してそれを受け入れることを検討してください。そうすれば、同じ問題を抱える将来のユーザーを助けることができます。 –

+0

ちょっと見つけられませんでした.. – guitarlass

関連する問題