Fußzeile CSS funktioniert nicht

Question

Ich habe einige CSS Stile für eine HTML Seite eingerichtet und alles funktioniert wie erwartet. Ich habe dann die CSS (minimal) bearbeitet und plötzlich bricht das Layout. Ich habe eine Kopie des Originals (funktioniert) CSS, also könnte ich einfach damit gehen. Aber ich wollte herausfinden, was ich falsch gemacht habe.

Also habe ich ein paar Stunden damit verbracht, über den fehlerhaften CSS zu gehen, aber ich kann einfach nicht finden, wo es falsch ist. Hoffe, dass jemand den Fehler aufzeigen kann.

In beiden Fällen ist die HTML die gleiche.

Ich habe 2 CodePens, eine mit HTML/CSS, die andere mit HTML und fehlerhaften CSS erstellt. Das Problem liegt im Fußbereich. Mit der fehlerhaften CSS fährt die "untere Leiste" oben in die Hauptfußzeile. Ich glaube jedoch, dass ich Floats korrekt gelöscht habe.

ist unter dem, was ich denke, der fehlerhafte Abschnitt CSS ist (aber es wird mehr Sinn machen, es mit HTML zu sehen entlang - weiter unten CodePen Links sehen):

footer{ 
    font-family: 'Open Sans', sans-serif; 
    margin-top:200px; 
    border-top:6px solid rgba(246, 246, 246, 0.8); 
    background-repeat:repeat-x; 
    background-position:left bottom; 
    background-size:contain; 
    background-color:#b8b8b8; 
} 

.footer-column-container{ 
    width:95%; 
    max-width:1200px; 
    list-style-type:none; 
    margin:0 auto; 
    padding:25px 0; 
} 

.footer-column-container li{ 
    float:left; 
    padding:20px 5px; 
    width:25%; 
    box-sizing:border-box; 
} 

.footer-column-container ul { 
    list-style-type:none; 
} 

.footer-links{ 
    height:250px; 
} 

.footer-links li{ 
    float:none; 
    display:block; 
    line-height:12px; 
    padding:8px 0; 
    width:100%; 
} 

.footer-column h4{ 
    color:#fff; 
    font-size:16px; 
    font-weight:bold; 
    margin-bottom:10px; 
} 

.footer-column a:link{ 
    font-size:14px; 
    text-decoration:none; 
    color:#fff; 
} 

#bottom-bar-container{ 
    background-color:#000; 
    border-top:1px solid #393939; 
    padding:20px 0; 
} 

#bottom-bar{ 
    font-size:12px; 
    margin:0 auto; 
    width:95%; 
    text-align:center; 
    color:#fff; 
} 

Es gibt ein gutes Stück Code ist so , anstatt sie alle hier zu platzieren, werde ich Links zu CodePens Liste:

Link zu arbeiten HTML/CSS: http://codepen.io/Ben10/pen/VjBgyB

Link zu arbeiten HTML/Faulty CSS: http://codepen.io/Ben10/pen/pbkYAd

Vielen Dank, wenn Sie mir helfen können.

Answer 1

Da Sie im Footer-Column-Container schwebende Elemente verwenden, wird seine Höhe nicht automatisch festgelegt. Sie müssen overflow:hidden in .footer-column-container CSS verwenden.

Das heißt

.footer-column-container{ 

    width:95%; 
    overflow:hidden; /*This property is missing*/ 
    max-width:1200px; 
    list-style-type:none; 
    margin:0 auto; 
    padding:25px 0; 

} 

Damit das div seine floating Kind Elemente beherbergen wird, dh die li Elemente innerhalb footer-Säulen-Container.

Sie haben overflow:hidden Eigenschaft in Ihrer Arbeit CSS festgelegt. Im fehlerhaften Code fehlt diese Eigenschaft. Es ist einfach der Grund, warum es versaut hat.

Answer 2

hinzufügen unter overflow:hidden; in Ihre .footer-column-container

.footer-column-container{ 
    width:95%; 
    max-width:1200px; 
    list-style-type:none; 
    margin:0 auto; 
    padding:25px 0; 
    overflow:hidden; /*Add this*/ 
} 

Answer 3

In dem <div style="clear:both;"></div> vor <div id="bottom-bar-container"></div>

Answer 4

Sie haben ein schwimmenden Probleme verwenden, so clear:both; auf #bottom-bar-container

#bottom-bar-container { 
    background-color: #000; 
    border-top: 1px solid #393939; 
    clear: both; 
    padding: 20px 0; 
} 

oder

Verwendung overflow: hidden; zu .footer-column-container

Ich hoffe, dass hilfreich sein, werden Sie Ziel

Answer 5

Sein einziger div löschen müssen zu erreichen. Ich überprüfe deinen gesamten Code, den du brauchst, um dein div zu löschen. Hier aktualisiert fiddle.

Hier habe ich den Code ändern, Blick ..

footer{ 
    font-family: 'Open Sans', sans-serif; 
    margin-top:200px; 
    border-top:6px solid rgba(246, 246, 246, 0.8); 
    background-repeat:repeat-x; 
    background-position:left bottom; 
    background-size:contain; 
    background-color:#b8b8b8; 
    width:100%; 
    float:left; 
    clear:both; 

} 

.footer-column-container{ 
    width:95%; 
    max-width:1200px; 
    list-style-type:none; 
    margin:0 auto; 
    padding:25px 0; 
    display:inline-block 
} 

Weitere Informationen zu div Clearing warum und wie finden Sie hier.

1. learnlayout.com
2. quirksmode.org
3. css-tricks.com

Ich hoffe, es wird Ihnen helfen :)