Previous Message
Next Message

liquid layout w/ bg image columns

Sent by Christian Montoya on 14 March 2006 22:10


On 3/14/06, Brian Cummiskey [EMAIL-REMOVED]> 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-REMOVED]]
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/
Previous Message
Next Message

Message thread: