2

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>
joncodo
  • 2,298
  • 6
  • 38
  • 74
P. Burden
  • 49
  • 5
  • `div class blank` is likely a bad idea here. What are you trying to achieve? You want it to separate the items? You could just put a padding on the element you want to space out maybe? – joncodo Aug 11 '16 at 00:28
  • That could be a good idea, I was given an image to cut up and turn into a few buttons and that's the only section without a button is why I labeled it as blank. – P. Burden Aug 11 '16 at 01:01

2 Answers2

2

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;
    }
wdfc
  • 374
  • 4
  • 9
  • https://imgur.com/a/ot32I is my placeholder images. All of this is placeholding images currently. I will try to fix what you've asked, I have cleaned up my CSS but something randomly is broken now and some images are now floating to the right despite the fact that there shouldn't be a functionality change. I have tried to change the width of the blocks but it does not help them display they still end up cutting out. – P. Burden Aug 11 '16 at 03:13
  • I also do not understand what you want me to do with clearfix. What parent div? do you mean the footer div? or the whole page's parent div? I have gotten other sections of this site to be inline without using clearfix. – P. Burden Aug 11 '16 at 03:15
  • please update your code with the image urls pasted into where they should be. Just hit edit and fix it, take your time, rome wasn't built in a day. Sorry, you apply .clearfix to the parent of the floated elements. So in your example, your floated elements are that in the footer, so your footer element needs the class "clearfix" (you need to paste the snippet into your css as well) you add multiple classes to a div using a space between classes
    – wdfc Aug 11 '16 at 03:17
  • I just did it for you, try the css I posted – wdfc Aug 11 '16 at 03:27
  • I inserted the code you asked, It is still vertically stacking but now in the left corner with more div's showing up but still not all of them. I may have linked you the wrong images. I have reuploaded them with the final look of them included as well. Thank you for your help so far. – P. Burden Aug 11 '16 at 03:42
  • Is that your full html? – wdfc Aug 11 '16 at 03:50
  • http://codepen.io/willcodes/full/AXYQrk/ this is the code I am using. No stacking so I am not sure what your talking about. – wdfc Aug 11 '16 at 03:50
  • I am working on uploading to pastebin as we speak to make sure. – P. Burden Aug 11 '16 at 03:53
  • I looked at your imgur. The reason why its stacking is because your images are all different sizes. I mentioned this already. – wdfc Aug 11 '16 at 03:54
  • http://shorttext.com/7d54baca is my full HTML for this page. The issue is I want them to be displayed as different sizes. Is there a way to do that without stretching them and ruing the text on them. – P. Burden Aug 11 '16 at 04:00
  • well the issue is I want them to be different sizes in the actual layout, so unless I can stretch them and not mess up the text that won't do well for me – P. Burden Aug 11 '16 at 04:02
  • Read this link? lol http://www.w3schools.com/css/css_navbar.asp i'm tempted to do this for you because I'm bored, but this is not what SO is for. – wdfc Aug 11 '16 at 04:08
  • Thank you, I am not sure how this will exactly help me with my image displaying issue but this will help me with some other developments I need to do. Also the code you posted at codepen does not display anything for me it just loads forever but I think that is on my end. I guess I could use the tag within the
    • tags to display images, either way thank you!!!
     – P. Burden Aug 11 '16 at 04:14
  • I deleted my codepen to make a better one for you. This is an example of how you could do it, not the answer. Try getting your vectors from flaticon.com for the facebook twitter icons. http://codepen.io/willcodes/pen/AXYQrk – wdfc Aug 11 '16 at 04:23
  • So the ul and li both control the CMS of the site so I will have to play around with this but I think you have put me on the right track thank you very much. – P. Burden Aug 11 '16 at 04:26
  • I have started to modify your code. I can not use most of it because blank li and ul codes mess up the cms and make the whole system no useable because it changes that CSS as well making navigation and editing impossible. Thank you for your help so far. – P. Burden Aug 11 '16 at 14:53
  • I have my site now displaying like your codepen displays. Thank you for the help I should be able to take it from here. – P. Burden Aug 11 '16 at 15:02
  • I have gotten the images to be in-line now, it's still not perfect and extends further off to the right that I intend, but I think I know how to fix that. Currently though, it does not sit at the very bottom of the page and sits actually around 10% up the page. – P. Burden Aug 11 '16 at 15:35
0

https://jsfiddle.net/bwvanwrL/

You want display: inline-block I think.

a, .blank, .ordering-loc{
  display: inline-block;
  background-repeat: no-repeat;
}

You should also try to not repeat yourself in your css. This makes it hard to maintain.

If you want the items to be more spaced out, I would suggest adding in a padding: 0 10px;

Typically, I try to stay away from float as it does not play well with other elements on the page. See this answer for more details. Are floats bad? What should be used in its place

Community
  • 1
  • 1
joncodo
  • 2,298
  • 6
  • 38
  • 74
  • That did not work at all, the images are now completely gone, even the parts that used to be seen. The divs are still all stacked, and even less of them are appearing now. I also have other pages thus the repeating of code often because streamlining it as you did with the a, would have broken more pages than just this one. – P. Burden Aug 11 '16 at 00:37
  • Also from what I can find inline-block will break on many versions of IE and I need this to work on all browsers. I'm not against inline I was just taught to use floats rather than inline-blocks due to compatibility issues across browsers but at this point I just want any fix. – P. Burden Aug 11 '16 at 00:43
  • I have tried playing with the width and having the total width add up to well below 100% and they still stack on top of each other. I have checked your code against mine and they should still be functionally the exact same but are not, I included: .mobile-app, .talk, .careers, .press, .blank, .fb, .yt .tw, .ig, .orderng-loc{ display: inline-block; background-repeat: no-repeat; } instead of your's which referenced all a's which would affect more things than I want. – P. Burden Aug 11 '16 at 00:55
  • So as for the a tag, this is just an example. Use it to learn and not direct copy it to your source code. That was the best way to select this scenario with css. As for IE, what version do you need to support. All modern versions support inline-block. As for the images, I don't have your images so I can't display them. As for the width greater than 100%, you need a margin-right of -4px. Its a known inline-block issue – joncodo Aug 11 '16 at 00:59
  • I applied the margin-right: -4px; to all the div's that are in-line and there was no change. I've been told as many browsers as possible and was told to include IE 7. As for the images they are just thin slivers with the names of the divs on them. I appreciate the attempt to help. – P. Burden Aug 11 '16 at 01:06
  • It looks like IE7 does not support inline-block. Use this tool to check that stuff. http://caniuse.com/#search=inline-block IE7 is pretty limiting. – joncodo Aug 11 '16 at 11:15