Posted by Jeremy on 11/28/07 02:59

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 :-)

Tested in Gecko, IE, and Opera.

Jeremy

[Back to original message]