Question

HTML

<div class="main">
    Lorem ipsum dolor.
</div>

<div class="footer">
    <p>More lorem.</p>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS

.main {
    text-align: center;
}

.footer {
    background: red;
    clear: both;
}

.footer ul {
    float: right;
}

.footer li {
    display: inline;
}

.footer p {
    float: left;
}​

Also on JSFiddle.

I’ve simplified a larger version of my main website not working. My footer won’t change colour. See how it says red?

Answer 1

See http://jsfiddle.net/uZs92/2/

Add

.footer {
    overflow:hidden;
}

When you have floating elements inside the container, you can:

• Add overflow:hidden (or something different than visible) to the container -> http://jsfiddle.net/uZs92/2/
• Add an element with clear:both at the end of the container (instead to the container itself) -> http://jsfiddle.net/uZs92/6/
• Add :after,::after{content:'.';font-size:0;} to the container -> http://jsfiddle.net/uZs92/5/