Footer CSS not working

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.

WKT · Accepted Answer · 2016-08-01 04:32:21Z

2

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

answered Aug 1, 2016 at 4:32

WKT

413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

frnt · Accepted Answer · 2016-08-01 04:29:35Z

0

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*/
}

answered Aug 1, 2016 at 4:29

frnt

8,9252 gold badges27 silver badges28 bronze badges

Comments

Praveen · Accepted Answer · 2016-08-01 04:30:22Z

0

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

answered Aug 1, 2016 at 4:30

Praveen

99012 silver badges36 bronze badges

Comments

Lalji Tadhani · Accepted Answer · 2016-08-01 04:33:23Z

0

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.

edited Aug 1, 2016 at 4:33

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

answered Aug 1, 2016 at 4:28

anand

3812 silver badges7 bronze badges

Comments

Himanshu Vaghela · Accepted Answer · 2016-08-01 06:57:10Z

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.

I hope it will help you :)

Collectives™ on Stack Overflow

Footer CSS not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related