Posted by Nik Coughlin on 11/28/07 03:47

"Jeremy" <jeremy@pinacol.com> wrote in message
news:IQ43j.489$9M.199@newsfe19.lga...
> dorayme wrote:
>> In article <Wp43j.3622$KK1.1727@newsfe24.lga>,
>> Jeremy <jeremy@pinacol.com> wrote:
>>
>>> Nik Coughlin wrote:
>>>> One thing that has always annoyed me, and I just design around it, is
>>>> having a tile that you want to use for your background image that
>>>> doesn't seamlessly tile, in a container that you want to be fluid. I
>>>> had a go at it, but had to use JavaScript:
>>>>
>>>> http://nrkn.com/fluidTiling/
>>>>
>>>> Question, anyone have *any* ideas about how you could do it without the
>>>> JS?
>>>
>>> I can think of a couple of ways to do that without Javascript, but all
>>> of them are far less elegant than just using the JS :P
>>>
>>
>> What are these ways?
>>
>
> OK, here is one (I can't resist a good CSS challenge)
>
> http://www.duckwizard.com/ciwas/square.html
>
> Here's how it works (Like I said, FAR worse than the JS solution - don't
> say I didn't warn you):
>
> 1) Outer box with tiling background image (the image is 32px square). This
> box floats so as to adjust to the width of its non-positioned contents.
> 32px padding to make room for background image to show through.
>
> 2) Inner box which floats as well, and is relatively positioned so that it
> can be the positioning parent for the content box.
>
> 3) Content box which is absolutely positioned and is set to take up most
> of the width of the parent (using all of top, bottom, left, and right
> attributes is a substitute for padding here)
>
> 4) Inside the inner box, there are several hundred (heh) floating 32x32
> boxes which make room for the content. Since they float, when put
> together, they will always make heights and widths that are multiples of
> 32. This space they create will expand the inner box, which will expand
> the outer box and the content box.
>
> Yeah, pretty ugly (and not a real solution by any means). But hey, you
> asked :-)

Still, very cool. Breaks in some situations, but I think we have gone
beyond real world usage here anyway :) Now I'm gonna have to try and think
of another out-of-left-field way to do it...

[Back to original message]