Footer column strech - make column background stretch full width - css

Question

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.
<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;
}

Answer 1

You cannot do it directly like you said "stretch" it as far as I know.
However, I made a little workaround for you here
It consists of:
using pseudo-element :before (assigned to the first footer column using :nth-of-type(1)) which we'll use for creating same red background to place on the left of the first column
positioning the :before element to position: absolute; in order to use left: 0; which will place the red background on the left edge of last positioned element
now our :before element is positioned relatively to the closest positioned ancestor - which is in our case the html element itself. But we want it to be positioned relatively to the footer which is not positioned yet, we do so using position: relative; on it (more on that here)
adding content: " "; height: 100%; width: 25%; so it appears actually
adding z-index: -1; to which places the before element behind the actual element. Read about it here
adding z-index: 0; to the footer element to include it to the positioning context
adding background-color: red;
final added code:
footer{
z-index: 0;
position: relative;
}
.test11:nth-of-type(1):before{
position: absolute;
left: 0;
content: " ";
height: 100%;
width: 25%;
z-index: -1;
background-color: red;
}
Few tips:
Don't use inline styles. Just don't
Use cf class to wrap just the floated elements (not e.g. footer containig them in your case)
For your future questions, it would be great, if you'd provided all the relating code, so people who want to help you could reproduce (and eventually find the solution) it as quickly as possible. (I had to include clearfix to css)
Hope this helps. Good luck!

Answer 2

Set container class width to 100%
.container {
width: 100%;
margin: 0 auto;
}