CODEWITHSUNDEEP

Reputation: 29314

Why doesn't my background turn red in this simple CSS?

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?

Upvotes: 1

Views: 107

Answers (2)

Reputation: 288130

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/

Upvotes: 4

Reputation: 943561

The footer does turn red, but since all of it's content is floating, it has nothing inside it that will prevent its height from being 0.

Set overflow: hidden on it so that floating elements will influence its height.

Upvotes: 2

Related Questions