The CSS3 gradient background can be used to create solid columns of color. This can be used to solve the problem of the different colors not extending to the bottom when the columns are of different heights. If you put a background color on each column, the shorter column’s color only extends to the bottom of it’s container (see first example in demo.) If you use a gradient background on the container of both columns, you will not need to worry about varying heights (see second example in demo.)
background: #8aec14 url(images/bg.jpg) repeat-y;
background-image: -moz-linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);
background-image: -o-linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);
background-image: -webkit-linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);
background-image: linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);
Explanation
The first line of code is a fall back for browsers that don’t support gradients. See Internet Explorer section below for more explanation.
You can add color stops to your gradients by saying where the colors end. You can specify this place using percentages or by giving a length in pixels. The trick to getting solid colors with a gradient background is to specify a color stop of the first color at the same spot as the next color’s stop.
background-image: linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);
Notice how they are both at 60%. So the first color goes from 0-60%, and the second color goes from 60% to 100% because the color value both are the same.
Internet Explorer
This trick does not work in any version of Internet Explorer. I believe it is supposed to work in IE10, however. The Filter command doesn’t handle stops, as far as I can tell.
So the solution for making this work in IE is to use one of the old ways of handling multiple columns of different backgrounds. There are several solutions, but I have always used a background image. If you create a small background image slice to be used on the container of the columns, as shown below, you can repeat it along the y-axis.
background: #color url(bg.jpg) repeat-y;
If you specify this code before the gradient, most browsers that do support gradients will not download the image, so it could still beneficial to use the gradient for your columns.