On 3/14/06, Brian Cummiskey <[EMAIL PROTECTED]> wrote: > Hi Guys, > > I'm attempting to build this: > > ----------------------------- > | | > ----------------------------- > | + + | > | + + | > | + + | > ----------------------------- > | | > ----------------------------- > > your basic 3-col fluid layout with a header and footer. > > The kicker, is i want to have a small gradient where the 'plus' columns are. > > I know with a fixed-width layout, you make the background image and > 'fake' the columns. Can this be done with fluid? > > 160px | leftover width | 160px > > I got it to work, but not with equal length columns, and thus the image > just stopped repeat-y'ing when the context ended. > > Thanks for any advice/links,
A quick and easy solution: wrap your 3 columns in two containers instead of one, give the outer container: background: color url(left-background) top left repeat-y; and the inner container: background: transparent url(right-background) top right repeat-y; As long as the floated columns are contained (add a clearing element before closing the first container), these two background images will extend the full height. I think there are some more complex solutions out there but I'm pretty sure this is the cleanest, hack-free-est one. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
