How to push footer below content and display inline?

Question

This question is a duplicate, but there was only one answer (not accepted or rated), almost no discussion, and the OP did not report back if it solved the problem. My css uses the suggestion, and it does not solve my problem, which I believe is the same.

I have a nav column floated to the left, and a content block (section) floated left against the nav bar. Then I have a footer section (this is html5). I am trying to create a footer nav that is inline.

The footer nav appears below the nav column, but to the left of the text (which extends past the nav column). Also, it appears in block format, not inline.

The html is roughly:

<nav>
  <ul>
    <li><a>...</a></li>
    ..
    ..
  </ul>
</nav>

<section>
...text...
</section>

<footer>
  <ul>
    <li><a>...</a></li>
    ..
    ..
  </ul>
</footer>

And the css is roughly:

nav {
  float: left;
  ..
  ..
}

section {
  float: left;
  ..
  ..
}

footer {
    clear: both;
}

footer li {
  display: inline;
}

Here is an example.

http://jsfiddle.net/abalter/NdExx/2/

score 1 · Accepted Answer · answered Sep 23 '13 at 09:09

You have several CSS issues that need to be fixed.

you use a lot of absolute/relative positioning without real need.
you don't specify vendor specific when they are needed.
you have an extra closing bracelet in your CSS (in the end).
you have a double declaration (its harmless, but annoying).

BTW, if you use that fixed CSS you will see that the clear:both; suddenly works. (it didn't work before because the text-section was absolutely positioned) also: I would recommend you to enclose the & text-section in one div, thus forcing the <footer> to always be below them even without clearing.

about your inline problem in the footer, although the li elements are set to display:inline; all of them contains divs, so in the end, they will behave like block elements. as an easy fix, I changed the footer li selector in the end of the CSS to footer *, but you should specify exactly what you want to be inline.

so, here's a Fiddle to demonstrate the changes.

Fixed CSS (+Vendor specifics, -typos, -double declaration)

#background-image
{
    background: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.6;
    position: fixed;
    background-repeat: repeat-y;
    padding: 0;
    margin: 0;
}

header
{
    width: 100%;
    padding: 0;
    margin: 0;
}

#buzz-joy-logo
{
    width: 100%;
    height: auto;
    top: 0%;
    position: relative;
    z-index: 2;
    display: block;
    padding: 0;
    margin: 0 auto 0 auto;
}

nav
{
    padding: 0;
    margin: 0 0 0 15%;
    float: left;
}

    nav li
    {
        display: inline;
    }

.nav-link
{
    position: relative;
    width: 10em;
    height: 5.3em;
    background-image: url(http://www.arielbalter.com/BuzzJoy/img/CoffeeCupNoSteam.png);
    display: block;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    text-align: center;
    margin: 0 0 1em 0;
    padding: 0;
    text-decoration: none;
}

    .nav-link:hover
    {
        color: DarkGoldenRod;
    }

.nav-cup-image
{
    height: 100px;
    width: auto;
    padding: 0;
    margin: 0;
}

.nav-text
{
    position: relative;
    color: Yellow;
    font-size: 1.5em;
    text-align: center;
    font-family: "GillSansUltraBoldCondensedRegular", sans-serif;
    font-weight: 100;
    margin: 0% 13% 0 0;
    padding: 0.6em 0em 10em 0;
}

    .nav-text:hover
    {
        color: DarkGoldenRod;
    }

#nav-list
{
    list-style-type: none;
    padding: 0;
}

.text-section
{
    width: 40%;
    background-color: GoldenRod;
    background-color: rgb(188, 121, 0);
    background-color: #BC7900;
    opacity: 0.9;
    padding: 0 2em 0 1em;
    margin: 1% 0 0 0;
    float: left;
}

    .text-section h1
    {
        font-family: "GillSansUltraBold", sans-serif;
        font-size: 2em;
        margin: 0 0 0.2em 0;
        padding: 0;
    }

    .text-section h2
    {
        font-family: "OpenSansExtraBold", sans-serif;
        font-size: 1.8em;
        margin: 0.4em 0 0em 0;
        padding: 0;
    }

    .text-section p
    {
        font-family: "OpenSans", sans-serif;
        font-size: 1em;
        padding: 0;
        margin: 0 0 0.3em 0;
    }

footer
{
    clear: both;
}

    footer *
    {
        display: inline;
    }

score 0 · Answer 2 · answered Sep 22 '13 at 20:47

In your example you just need to set the .text-section to:

position: relative;

and the footer goes to the bottom like you want.

Otherwise your generic code will basically do what you're looking for. Here's a quick pen showing the concept: Example Pen

How to push footer below content and display inline?

2 Answers2