CODEWITHSUNDEEP
htmlcsscss-position
XT_Nova
XT_Nova

Reputation: 1170

How could i center unordered lists in a footer?

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%;
    }

Upvotes: 0

Views: 3151

Answers (2)

Exploring
Exploring

Reputation: 573

I have edited your jsfiddle. please check the following code:

.mainContent {
 width: 80%;
 margin: 0 auto;
 text-align:center;
}

.header {
 border: 2px solid red;
}

.content {
    border: 2px solid red;
}

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

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

.footer hr {
 width: 80%;
}

.footerLists ul {
 width:13%;
}

Upvotes: 0

Matthew Trow
Matthew Trow

Reputation: 2842

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.

Upvotes: 1

Related Questions