Footer CSS not working - html

Question

I set up some CSS styles for a HTML page and all was working as expected. I then edited the CSS (minimally) and suddenly the layout breaks. I've got a copy of the original (working) CSS so I could just go with that. But I wanted to sort out what I did wrong.
So, I've spent a few hours going over the faulty CSS but I just cannot find where it is incorrect. Hoping someone can point out the mistake.
In both cases the HTML is the same.
I've created 2 CodePens, one with working HTML/CSS, the other with same HTML and faulty CSS. The problem is in the footer area. With the faulty CSS, the 'bottom bar' rides up into the main footer above. However, I think I've cleared floats correctly.
Below is what I think is the faulty section of CSS (but it will make more sense to view it along with HTML - see CodePen links further below):
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;
}
There's a fair bit of code so, rather than place it all here, I'll list links to CodePens:
Link to working HTML/CSS: http://codepen.io/Ben10/pen/VjBgyB
Link to working HTML / Faulty CSS: http://codepen.io/Ben10/pen/pbkYAd
Many thanks if you can help me.

Answer 1

you have a floating issues so use clear:both; on #bottom-bar-container
#bottom-bar-container {
background-color: #000;
border-top: 1px solid #393939;
clear: both;
padding: 20px 0;
}
or
use overflow: hidden; to .footer-column-container
I hope that will be helpful to achieve you goal

Answer 2

Add below overflow:hidden; into your .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

Add the <div style="clear:both;"></div> before <div id="bottom-bar-container"></div>

Answer 4

Since you are using floating elements inside footer-column-container, its height won't be set automatically. You need to use overflow:hidden in .footer-column-container CSS.
That is
.footer-column-container{
width:95%;
overflow:hidden; /*This property is missing*/
max-width:1200px;
list-style-type:none;
margin:0 auto;
padding:25px 0;
}
So that the div will accommodate its floating child elements , ie the li elements inside footer-column-container.
You have overflow:hidden property set in your working CSS. In the faulty code, that property is missing. It is simply the reason why it has messed up.

Answer 5

Its only need to clear div. I check your whole code you need to clear your div. Here updated fiddle.
Here I change your code, Have look..
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
}
For more details for clearing div why and how please go here.
learnlayout.com
quirksmode.org
css-tricks.com
I hope it will help you :)