Need help positioning footer with floats @media queries

[expo703]

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

[Paulie_D]

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/

[expo703]

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?

[Paulie_D]

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.

[expo703]

.

[Paulie_D]

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

[expo703]

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

[lschoen114]

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.

[expo703]

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

Css for these two are :
f-gray-links li {
    background: none repeat scroll 0 0 transparent;
    line-height: 180%;

.f-gray {

padding: 1px;
margin: 0 auto;
text-align: left !important;
}

.grid_3 { width:208px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

/* form elements */
.f-gray .grid_3 {width:228px;}

where would I add width:33%; float;left;

[expo703]

.

[Paulie_D]

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

[expo703]

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

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

[Paulie_D]

Probably because you haven’t included enough CSS.

[expo703]

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

[JohnMac4]

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.

[Author]

Posts