3 column footer background color

Question

I'm looking to change the background color of a footer. I tried making another div around it which worked but no matter what the background-color didn't budge. I must be overlooking something obvious!

This is what I have right now: http://jsfiddle.net/x5yvm50r/

And the code:

<div class="floatleft">
<h3>Heading</h3>
<ul>
<li><a href="http://">Link 1</a></li>
<li><a href="http://">Link 1</a></li>
<li><a href="http://">Link 1</a></li>
<li><a href="http://">Link 1</a></li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>

.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}

If anyone has any idea, I'd really appreciate pointing me in the right direction! This is more or less what I'm hoping for it to look like eventually enter image description here

Thanks! :)

Is [this](http://jsfiddle.net/lalu050/x5yvm50r/1/) what you want??? — Lal, Sep 15 '14 at 18:28

score 1 · Answer 1 · answered Sep 15 '14 at 18:31

Check this fiddle

HTML

<div class="floatleft footcontainer">
    <div class="floatleft">

<h3>Heading</h3>

        <ul>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
    </div>
    <div class="floatleft">

<h3>Heading</h3>

        <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div class="floatleft">

<h3>Heading</h3>
social icons</div>
    <div class="clear"></div>
</div>

CSS

.floatleft {
    float: left;
    margin: 0 20px 0 0;
    width: 400px;
}
.clear {
    clear:both
}
.footcontainer {
    background-color:lightblue;
    float:left;
}

I've added a div which holds the 3 divs and gave it the background color and the float property.

score 1 · Answer 2 · answered Sep 15 '14 at 18:32

Here you go: http://jsfiddle.net/5s4w19zy/

I wrapped the three floated divs in a container div (footer) and then floated them inside of that.

<footer>
    <div>
        <h3>Heading</h3>
        <ul>
            <li><a href="http://">Link 1</a></li>
            <li><a href="http://">Link 1</a></li>
            <li><a href="http://">Link 1</a></li>
            <li><a href="http://">Link 1</a></li>
        </ul>
    </div>
    <div>
        <h3>Heading</h3>
        <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div>
        <h3>Heading</h3>
        social icons
    </div>
    <div class="clear"></div>
</footer>

footer
{
    width: 100%;
    height: 150px;
    background: #f5f5f5;
    overflow: hidden;
}

footer div
{
    float: left;
    display: block;
    margin: 0 0 0 0;
    width: 33.333333%;
    height: 150px;
}

.clear {clear:both}

score 1 · Answer 3 · answered Sep 15 '14 at 18:32

HTML5 offers semantic markup tags, and since you need a wrapper for your footer (allowing a parent element to have a the background-color property of your choosing), <footer> tag sounds like the way to go:

<footer id="footer">
    <div class="floatleft">
    <h3>Heading</h3>
    <ul>
    <li><a href="http://">Link 1</a></li>
    <li><a href="http://">Link 1</a></li>
    <li><a href="http://">Link 1</a></li>
    <li><a href="http://">Link 1</a></li>
    </div>
    <div class="floatleft">
    <h3>Heading</h3>
    <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div class="floatleft">
    <h3>Heading</h3>
    social icons
    </div>
    <div class="clear"></div>
</footer>

#footer { background-color:#asYouLikeIt; }

The idea of the semantic tags is that you don't need to give it an id of what it is — Luke, Sep 15 '14 at 18:33

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Simple, you should wrap the content in a seperate block level element (i.e. div or footer). Here is the updated fiddle, using a block level element with id="wrapper": http://jsfiddle.net/df1zjwmb/1/

<footer id="wrapper">
   <div class="floatleft">
        <h3>Heading</h3>
        <ul>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
    </div>
    <div class="floatleft">
        <h3>Heading</h3>
        <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div class="floatleft">
         <h3>Heading</h3>
        social icons
    </div>
    <div class="clear"></div>
</footer>

And the CSS:

#wrapper {
    background-color: green;
}

Clearing floated elements means that elements below the clear will be reset, but does not turn the floated elements into a block itself. To solve the problem requires adding a wrapper div, which creates a block level element that you can apply a background color to. Or you could use something other than floats, like inline blocks.

Here is more information: Advantages of using display:inline-block vs float:left in CSS

score 0 · Answer 5 · answered Sep 15 '14 at 20:57

I have used flex box:

check this : http://jsfiddle.net/x5yvm50r/9/

HTML:

<footer>
    <section class="left">l</section>
    <section class="center">c</section>
    <section class="right">r</section>
</footer>

CSS:

footer{
    width:100%;
    display:flex;
}
footer section{
    flex:1;
}

3 column footer background color

5 Answers5

Check this fiddle