Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joe Consterdine
Joe Consterdine
13,965 Points

Footer problem - Make column stretch full width?

I've got my footer with four columns inside a container. It needs to be inside the container to line up with the content above.

My problem is I want the left column to have a background of red, however currently it will not stretch because it's obviously in a container.

How can I stretch it full width to the left whilst keeping it lined up with the content above.

See pic:

http://s17.postimg.org/y87mv9ajz/footer_problem.png

Thanks!

<footer class="cf">
    <div class="container">

    <div class="test11" style="width: 25%; float: left; background: red;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="test11" style="width: 25%; float: left;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="test11" style="width: 25%; float: left;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="test11" style="width: 25%; float: left;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    </div>
</footer>

.container {
        width: 1170px;
        margin: 0 auto;
    }
footer {
    background: grey;
}
peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

have you tried materialized or bootstrap frameworks?

Joe Consterdine
Joe Consterdine
13,965 Points

Hi Peyton,

the problem is actually in Bootstrap, I'm just using an example above which replicates the problem as I don't have the project files with me.

The same problem occurs with Bootstrap. I have the container which I want to center my main content but I want my footer to stretch full width.

The problem is I want my footer content to align with the centered content above but have the left column have a background color.

There may be only hacky ways to achieve this, but I'm not sure.

cheers.

peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

For this aspect its easier to use materialized, if you want more features I'd use bootstrap.

I could set this up for you in materialized or walk you through it. Is this what you are looking for? http://materializecss.com/footer.html

1 Answer

Richard Hope
Richard Hope
25,237 Points

I'm not sure extending the left hand footer column is what you should be trying to do. Seems like changing the background-color of the footer element on the left hand side to the same colour as the column would work, possibly using a gradient so it's still grey on the left hand side.