Question

I have an HTML CSS Query.

I have the following JS Fiddle. http://jsfiddle.net/NC9NL/ If you look at this fiddle you will see I have two divs either side of the main content to give it the gradient effect. These two divs left and right are set at 100%;

However when the main content is larger than this e.g. needs a scroll bar these other two divs do not follow it down the page. Does anyone know how I can accomplish this.

Cheers,

Answer 1

I think you don’t really need those additional columns. Just combine both gradients into one and assign it to the main column:

.container_body {
    background: #fff;
    background: -moz-linear-gradient(left, #c6c6c6 0%, #ffffff 2%, #ffffff 98%, #c6c6c6 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c6c6c6), color-stop(2%,#ffffff), color-stop(98%,#ffffff), color-stop(100%,#c6c6c6));
    background: -webkit-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -o-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -ms-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: linear-gradient(to right, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#c6c6c6',GradientType=1 );
}