P. Burden P. Burden - 3 months ago 6
CSS Question

Float left is not working in my footer so it is not displaying inline properly

I am testing out a footer on one of my pages so that I can put it on every page but it does not display properly. Currently, the div's in the footer div are all stacking on top of each other rather than being next to each other. Also, the divs are only displaying part of the image that they should be displaying instead of the whole image. I also am not sure how to make these change appropriately with screen size sliding as the divs will not all be uniform sizes but should always end up taking up the whole width of the screen. My CSS is:

.page{
height: 100%;
width: 100%;
text-align: center;
}
.bgood-footer{
width:100%;
height: 20%;
position: fixed;
bottom: 0;
}
.mobile-app{
float: left;
background-image: url('../images-source/mobile-app.png');
background-repeat: no-repeat;
}
.talk{
float: left;
background-image: url('../images-source/talk-to-us.png');
background-repeat: no-repeat;
}
.careers{
float: left;
background-image: url('../images-source/careers.png');
background-repeat: no-repeat;
}
.press{
float: left;
background-image: url('../images-source/press.png');
background-repeat: no-repeat;
}
.blank{
float: left;
background-image: url('../images-source/blank.png');
background-repeat: no-repeat;
}
.fb{
float: left;
background-image: url('../images-source/fb.png');
background-repeat: no-repeat;
}
.yt{
float: left;
background-image: url('../images-source/yt.png');
background-repeat: no-repeat;
}
.tw{
float: left;
background-image: url('../images-source/tw.png');
background-repeat: no-repeat;
}
.ig{
float: left;
background-image: url('../images-source/ig.png');
background-repeat: no-repeat;
}
.ordering-loc{
float: left;
background-image: url('../images-source/ordering-loc.png');
background-repeat: no-repeat;
}


My HTML is:

<div class="page">
<div class="bgood-footer">
<a href="/mobile-app">
<div class="mobile-app">Mobile Application</div>
</a>
<a href="/talk-to-us">
<div class="talk">Talk To Us</div>
</a>
<a href="/careers">
<div class="careers">Careers</div>
</a>
<a href="/press">
<div class="press">Press</div>
</a>
<div class="blank"></div>
<a href="https://www.facebook.com/bgood">
<div class="fb">FB</div>
</a>
<a href="https://www.youtube.com/user/unclefaris">
<div class="yt">YT</div>
</a>
<a href="https://twitter.com/b_good_">
<div class="tw">TW</div>
</a>
<a href="https://twitter.com/b_good_">
<div class="ig">IG</div>
</a>
<div class="ordering-loc">Ordering From Location</div>
</div>
</div>

Answer

Its because your not using clearfix. I looked at your code but there were so many repeats I didn't want to paste a placeholder to see what it actually looked liked. From what you described, a part of your problem lies in floating without properly clearing. When you float elements you have to fix the parent afterwords because floating disrupts the natural block stacking order applied to block elements.

I repeat ... add clearfix to the PARENT. https://css-tricks.com/snippets/css/clear-fix/

Your second problem is that you have all these parts to your footer that are displaying images without a specified width. Because I don't know what the images are its hard to say, but if you are displaying a gallery like that my advice is, crop the photos so they are all equal in size. add

img{
width:100%;
}

to the top of your css,

and lastly, you can apply a max width and width value to your footer items to keep it responsive. (Make sure they do not exceed 100%). What I mean is, all your little sections of your footer could be width:10%; so when they float in line, all of the widths add to 100%(this doesn't account for margin and padding so be careful)

If you want me fiddle around with the code, please add placeholder images, or upload your pictures to an images hosting site so I can see what it looks like on my screen.

Update: I added your placeholder images and added width to your div. Here is your updated css

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.page{
    height: 100%;
    width: 100%;
    text-align: center;
    }
    .bgood-footer{
        width:100%;
        height: 20%;
        position: fixed;
        margin:0 auto;
        bottom: 0;
    }
    .mobile-app{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png-app.png');
        background-repeat: no-repeat;
    }
    .talk{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngo-us.png');
        background-repeat: no-repeat;
        width:120px;
    }
    .careers{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngs.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .press{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .blank{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .fb{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .yt{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .tw{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ig{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ordering-loc{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
width:200px;
    }