CSS3 Borders and Gradients - html5, css3, html, fluid

Mam kwerendę HTML CSS.

Mam następujące JS Fiddle. http://jsfiddle.net/NC9NL/ Jeśli spojrzysz na to skrzypce, zobaczysz, że mam dwa elementy div z każdej strony głównej zawartości, aby nadać jej efekt gradientu. Te dwa elementy div w lewo i w prawo są ustawione na 100%;

Jednak gdy główna treść jest większa niż ta, np. potrzebuje paska przewijania, te dwa pozostałe elementy div nie podążają za tą stroną. Czy ktoś wie, jak mogę to osiągnąć?

Twoje zdrowie,

Odpowiedzi:

Myślę, że naprawdę nie potrzebujesz tych dodatkowych kolumn. Wystarczy połączyć oba gradienty w jeden i przypisać je do głównej kolumny:

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