Grow your CSS skills. Land your dream job.

Need help positioning footer with floats @media queries

  • # June 17, 2013 at 11:43 am

    This is the site : http://www.kaehler1920.com

    # June 17, 2013 at 11:50 am

    Instead of using floats, try inline-block and text-align:center.

    http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

    # June 17, 2013 at 1:48 pm

    Thank you Paulie! that worked with the top nav…I’m having issues with the footer though.. I’m going to want to add more stuff to it in the future so I think I would like to have it in columns like : Company Info : with about us links and a few more ul links.. Social Media: links… Customer Service: links.. and little text right up.. whats the best way to tackeling that so it stills doesn’t look like crap when the browser is re-sized?

    # June 17, 2013 at 1:57 pm

    If they are separate lists then do it that way.

    Unless you are using % based widths though you will always run into problems.

    Assuming that you are using media queries you should be fine. Remember thhe **vast** majority of viewers won’t be re-sizing, it’s only us developers who do that with any regularity.

    # June 17, 2013 at 2:04 pm

    .

    # June 17, 2013 at 2:22 pm

    That will be the divs.

    I would lay it out something like this…you’d just have to change it for the 960 classes etc.

    http://codepen.io/Paulie-D/pen/rHLGx

    # June 18, 2013 at 6:17 pm

    Damn – almost got it! just need to position it correctly..they are just vertical and want to have them next to each other like you have it above..I have all the links and ul/li items setup correctly and its displaying under the div tag f-gray class grid3 for width .f-gray-links

    kaehler1920.com

    # June 18, 2013 at 6:34 pm

    Create a class for your < "ul"> such as “navigation”, then set a float to the class.

    ul.navigation{
    width:33%;
    float:left;
    }

    Then just start a new ul for each of the three sections.

    Then, when you use @media, all you need to do is change the width of the footer container (such as 95%), and the lists will update automatically.

    # June 19, 2013 at 11:42 am

    Thanks for the reply.. I have a ul class already

    # June 19, 2013 at 1:38 pm

    .

    # June 19, 2013 at 1:41 pm

    Please use codepen…we need to see it working (or not).

    # June 19, 2013 at 1:52 pm

    http://codepen.io/anon/pen/Eapgf

    but it doesn’t look like that live.. i’m not sure why

    # June 19, 2013 at 1:56 pm

    Probably because you haven’t included enough CSS.

    # June 19, 2013 at 2:21 pm

    http://codepen.io/anon/pen/Eapgf

    # June 19, 2013 at 2:39 pm

    Why don’t you just create a CSS class that encapsulates the unordered list. You can then apply the float, width, and inline-block properties to that.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".