2011-01-07 16 views
-1

Ich habe keine Ahnung, warum das #mainControldiv Div nicht von Wrapper div umschlossen ist. Hier ist das HTML und CSS folgt vor:CSS-Problem mit Hauptwrapper div

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

Es sollte ziemlich einfach sein, aber ich kann nicht herausfinden, warum die mainControldiv nicht innerhalb der Grenze des mainWrapperdiv zeigen, es ist direktes Elternteil. Und können Sie auch der Logik oder dem inneren Grund, warum es nicht so funktioniert, wie ich es erwarte, im Voraus danken.

Antwort

2

Sie können nicht divs so enden, auch wenn ein div keinen Inhalt hat, ist es einen schließenden Tag haben muss:

<div></div> 

So Sie Struktur ändern, um wie folgt:

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

Wow, du hast absolut recht. Ist das ein XHTML-Standard oder nur ein allgemeiner HTML-Standard? Und unter welchem ​​Thema kann ich mehr Informationen zu diesen Layoutproblemen finden? Nochmals vielen Dank. – dave

+0

'div' ist in XHTML genauso definiert wie in HTML - [nach w3schools] (http://www.w3schools.com/tags/tag_div.asp). Was Sie versucht haben, würde als singuläres Tag bezeichnet werden und ist nur in bestimmten Situationen möglich. Ich habe selbst gegoogelt und konnte keine vernünftige Erklärung zu dem Thema finden, daher kann ich in dieser Hinsicht nicht wirklich helfen. –