Inline elements in Footer

HTML & CSS
1

Hi I have elements in footer and I want them to appear
like so: Codepen

1286Ă—51 19 KB

HTML:

<footer class="footer">
      <div class="container">
        <div id="ftr-wrap">
            <div class="ftr-links">
                <ul>
                   <li><a href="#">Terms</a></li>     
                   <li><a href="#">Privacy Policy</a></li>     
                   <li><a href="#">Sitemap</a></li>     
                </ul>
            </div>
            <div class="copyright-amazon">
                <p class="copyright">&copy; Copyright Preferred Dentist 2015 Glendale, CA USA</p>
                 <p class="amazon">Shop at Amazon</p>
            </div>     
        </div>
      </div>
    </footer>
2

Your Pen shows the result you want. What’s the issue?

3

I want to look like this:

1286Ă—51 19 KB

4

O, sorry. I see!

1 Like
5

Yeah that is what I meant

6

You haven’t set the parents to be inline-block, or floating, whatever method you prefer. You’ve done it for the inner list links, but the parents need them as well.

7

This is one possibility. There are others.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>csosa footer</title>
<!--
http://www.sitepoint.com/community/t/inline-elements-in-footer/201734
csosa
Sep 14,2015 6:10 PM
-->
    <style type="text/css">

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    padding:0;
    margin: 0;
}

.footer {
    position: absolute;
    bottom:0;
    width:100%;
    background-color: #1791b8;
}

.footer p {
    color: #fff;
    font-size:.75em;
    display: inline-block;
}

.container {
    max-width: 1674px;  /* adjust to allow for padding as needed */
    padding:0 50px;
}

#ftr-wrap {
    display:table;
    table-layout:fixed;
    width:100%;
    margin:0 auto;
}
#ftr-wrap > div {
    display:table-cell;
    vertical-align:middle;
    outline:1px dashed red;  /* TEST Outline.  TO BE DELETED. */
}
#ftr-wrap > div:nth-child(1) {text-align:left;}
#ftr-wrap > div:nth-child(2) {text-align:center;}
#ftr-wrap > div:nth-child(3) {text-align:right;}

.ftr-links ul {
    padding: 0;
}
.ftr-links ul li {
    display: inline-block;
    padding-right: 15px;
    font-size:.75em;
}
.ftr-links ul li a {
    color: #fff;
    margin: 0;
}

    </style>
</head>
<body>

    <footer class="footer">
        <div class="container">
            <div id="ftr-wrap">
                <div class="ftr-links">
                    <ul>
                        <li><a href="#">Terms</a></li>     
                        <li><a href="#">Privacy Policy</a></li>     
                        <li><a href="#">Sitemap</a></li>     
                    </ul>
                </div>
                <div class="copyright-amazon">
                    <p class="copyright">&copy; Copyright Preferred Dentist 2015 Glendale, CA USA</p>
                </div>
                <div>
                    <p class="amazon">Shop at Amazon</p>
                </div>     
            </div>
        </div>
    </footer>

</body>
</html>
2 Likes
8

Good method, I did the same with the table method except it didnt work for me
I see how you used the child element as well I should of thought of that…
thanks… :smiley:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.