2011-01-07 14 views
-1

#mainControldiv divがラッパーdivで囲まれていない理由はわかりません。ここで、次のHTMLとCSSは次のとおりです。メインラッパーdivのCSS問題

CSS:

* 
{ 
padding: 0px; 
margin: 0px; 
} 

div 
{ 
border: 1px solid; 
} 

#mainWrapperdiv 
{ 
width: 1000px; 
margin: 0px auto 0px auto; 
} 

#maindiv 
{ 
width: 850px; 
height: 500px; 
margin: 50px auto 0px auto; 
border: 5px solid; 
} 

#mainControldiv 
{ 
width: 850px; 
height: 150px; 
margin: 470px auto 0px auto; 
border: 5px solid; 
float: right; 
} 

#moveablediv 
{ 
    width: 50px; 
    height: 50px; 
    background: lightgreen; 
    position: relative; 
    left: 400px; 
    top: 200px; 
} 

#centerPointdiv 
{ 
    width: 5px; 
    height: 5px; 
    background: black; 
    position: relative; 
    left: 22px; 
    top: 22px; 
} 

それはかなりまっすぐ進むべきである、まだmainControldivはmainWrapperdivの境界内に表示されない理由を私は理解できません、それは直接の親です。そして、私が期待しているように、それがなぜ機能していないのか、その内部の理由を、事前に感謝することができますか?

答えて

2

あなたはdiv要素が内容をもたない場合でも、それが終了タグを持っている必要があり、そのようなdivを終了することはできません。

<div></div> 

次のようにそうであることを、あなたの構造を変更します。

<body> 
<div id = "mainWrapperdiv"> 
    <div id = "maindiv"> 
    <div id = "moveablediv" > 
    <div id = "centerPointdiv"></div> 
    </div> 
    </div> 
    <div id = "mainControldiv"></div> 
</div> 
</body> 
+0

うわーを、あなたの絶対に正しい。これはXHTML標準か一般的なHTML標準かです。そして、どのトピックでこれらのレイアウトの問題についての詳細情報を見つけることができます。もう一度おねがいします。 – dave

+0

'div'はHTMLと同じようにXHTMLで定義されています - [w3schoolsによる](http://www.w3schools.com/tags/tag_div.asp)。あなたがしようとしていたものは単数タグと呼ばれ、特定の状況でのみ可能です。私は自分の周りでグーグルで話していたので、本当にその話題についてまともな説明を見つけることができなかったので、私はそれについて本当に助けてはいけません。 –