Warum enthält mein "container" div keine floated-Elemente?

Question

Ich erstelle eine Website für meine Schulen "Math Relay" -Wettbewerb.

Ich habe ein "Container" div (mit einem weißen Hintergrund), dann eine obere Leiste, linke Leiste und rechte Leiste Div innerhalb des Containers.

linker und rechter Balken sind beide innerhalb des "Containers".

Wenn Sie jedoch in das Bild unten schauen, können Sie sehen, dass die rechte Leiste den grauen Hintergrund darunter zeigt. Wenn "Container" wirklich den oberen, linken und rechten Balken enthält, dann sollte der Hintergrund des Containers durchscheinen und der Boden sollte alle auf einer einheitlichen Ebene mit einer weißen Farbe sein.

Stattdessen scheint es, dass der Container die linke & rechte Leiste nicht vollständig enthält und daher der tatsächliche Körperhintergrund auf der Unterseite der rechten Leiste angezeigt wird.

Hier ist meine CSS:

#container { 
    margin: 0 auto; 
    width: 750px; 
    background-color: #ffffff; } 

#top-panel { 
    background-color: #000000; 
    text-align: left; 
    width: 100%; 
    height: 88px; 
    float: left; } 

#left-panel { 
    clear: left; 
    text-align: center; 
    background-color: #ffffff; 
    border-right: 1px dashed #000000; 
    float: left; 
    width: 250; } 

#right-panel { 
    background-color: #ffffff; 
    float: left; 
    width: 499; } 

Link zur Seite here.

Wie kann ich den "Container" wirklich die divs darin enthalten, so dass der graue Hintergrund nicht unter meiner rechten Tafel angezeigt wird und meine unebene Ebene unten erzeugt?

Answer 1

Beide Panels sind schwebend und werden daher aus dem normalen Seitenfluss entfernt. Um den Container einzukapseln, müssen Sie den Float löschen. Die Art, wie ich tun ist, ist die Klasse klar für br machen:

.clear { 
    clear:both; 
    line-height:0; 
} 

diese Weise ist es keinen Platz in Anspruch nimmt und eine klar. Dann legen Sie es unter die zwei Divs im Container Div als solche

<br class="clear" /> 

Sollte funktionieren!

Answer 2

Nichts zwingt den Containment, Sie können ein clear auf dem letzten Element angeben, um die Contintion zu erzwingen. Eine gemeinsame Hack ist ein zusätzliches Sperrelement mit clear:both dh hinzuzufügen: <div style="clear:both"></div>

Answer 3

overflow: auto 

sollte es beheben.

Answer 4

Es gibt eine CSS-Methode, um das Problem namens Clearfix zu beheben. Es ist am besten, es als eine Klasse verwenden Sie wahlweise an die divs anwenden Sie wollen:

.clearfix { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Für Ihre spezifische Markup, die folgende CSS tun:

#left-panel:after, 
#right-panel:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Referenz http://www.positioniseverything.net/easyclearing.html

Answer 5

overflow:hidden; height:100%; <-- for ie 

Auf dem Container wird es tun.