How could i center unordered lists in a footer?


Tags: html,css,html5,css3,css-position

Problem :

I'm playing around with jsfiddle, and i am trying to center (in my case, four) unordered lists in the footer (which i often see webpages have these days).

How should i play around with the margin and the padding for making those unordered lists to appear centered (equal margin right/left of the far most right and left <ul>), and with equal padding in-between the lists?

JSfiddle here!

The html code:

<div class="mainContent">
    <header class="header">
        <h1>Header</h1>
    </header>
    <div class="content">
        <p>Content...</p>
    </div>
    <footer class="footer">
        <p> &copy Footer</p>
        <hr>
        <div class="footerLists">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </footer>
</div>

The CSS code:

    .mainContent {
        width: 80%;
        margin: 0 auto;
    }

    .header {
        border: 2px solid red;
    }

    .content {
            border: 2px solid red;
    }

    .footer {
        height: 200px;
        border: 2px solid red;
    }

    .footer ul {
        float: left;
        list-style: none;
    }

    .footer hr {
        width: 80%;
    }

    .footerLists {
        width: 80%;
    }


Solution :

I'm not entirely sure whether what you want to achieve is, to all intents and purposes, a grid layout? it sounds like it is, in which case .... you need a grid :)

Rather than getting too complicated and grabbing a grid framework - of which there are hundreds - it's useful to know how grids work, as you can directly apply that knowledge to your site footer.

One of the best articles I've come across, is "Don't overthink it grids" http://css-tricks.com/dont-overthink-it-grids/

If you consider your four lists simply as 25% wide columns, half your battle is won. It doesn't matter whether your container element with is pixels or percent, a percentage based grid will sit neatly within.


    CSS Howto..

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How to gray out a HTML element

    How to remove last TD in first LINE

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    CSS: How to select first element in each row?

    jQuery - jCarouselLite - Images are not showing up

    How to make two-coloured stripe using CSS?

    How to align a label to the “BOTTOM” of a div in CSS?

    how to write this code in right way in javascript

    How do I scroll to s specific location in an iframe?

    How to inject javascript var into css

    How to css this?

    How to remove an element from the flow of HTML/CSS?

    How to center an unordered list?

    How can I stop an image element from taking 100% width?

    background image not shown in div elements in mobile jquery

    How do I prevent a link tag from adding extra padding below an image?

    How to load Different css everytime onload

    How to add mouse hover properties to pie drawn on a node in d3?

    How to center a span inside a TD?

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    How to highlight a row of my table

    How to change custom icon image on hover of the link next to it?

    How can I add my custom style for my bootstrap navbar?

    Hover over image making it transparent and showing text

    How can I have a CSS style different for IE6?

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to make the new long shadow trend with CSS?

    jQuery + CSS text show not working