Columns with equal height and background color overflowing container

Question

I want to achieve this:

or

Preferably in css only.

I have searched around and read this article http://css-tricks.com/fluid-width-equal-height-columns/. However it does not really tackle the background colors overflowing the container issue.

Answer 1

Once you have a div that is trapped inside of a parent container it is going to be difficult to get it to overflow horizontally. If you can get the div that you want to overflow outside of that container it would be best.

If not, one way you can achieve this effect is using the :before and :after on the divs that you want to overflow. Basically you are giving them the same height and background-color and then position them to the right and left of the main div.

.overflowing-div { position: relative; }
.overflowing-div:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    margin-left: -100%;
    width: 100%; 
    height: 100%; /* or fixed height if you know the height of the div you want to extend */
    background-color: #ccc; /* same color as .overflowing-div */
}

and the same thing for the :after, just using right and margin-right