Re: flowing around both sides of a float

On Jan 6, 2008, at 8:01 PM, James Elmore wrote:

>
> On Jan 6, 2008, at 1:22 PM, Brad Kemper wrote:
>>
>> People may have a hard time coming up with printed, published  
>> examples of two sided floats that are not in columns, but that is  
>> largely due to the fact that most newspapers and magazines are  
>> arranged in columns of some sort. But a Web page is not the same  
>> as a static piece of paper, as I suspect even David would agree.  
>> Paper cannot have a fluid design, and columns (other than those  
>> that define page divisions, like sidebars and navigation bars) can  
>> cause problems on screen when the text gets so long that it  
>> requires re-scrolling from the bottom to the top of each column.
>>
>> Since the conversation has largely ignored the fact that floats in  
>> Web pages are, probably more often than not, used for things other  
>> than pull quotes, I have put together a fictional Web page to show  
>> how a positioned float (or positioned element with "wrap", or a  
>> "free" floated element) could lead to creative possibilities that  
>> are not currently possible with CSS.
>>
>> This is a liquid layout, so feel free to try it in different  
>> window sizes (it can be made very narrow). Right now, the  
>> positioned elements just overlap and cover up the text, but with  
>> some sort of positioned float, the idea is that the floats would  
>> split each line in two, rather than just overlapping:
>>
>> http://bradclicks.com/cssplay/centerfloat.html
>>
>
> Nice example, Brad.  What about an example where the graphics  
> aren't in the center? (Sorry, but my artistic skills are so limited  
> my kids won't let me color in their coloring books because I can't  
> stay inside the lines; I can imagine, but not produce.)

I just wanted to show an example, since everyone was assuming this  
would only be valuable in multicolumn layouts. If it brings to mind  
all sorts of other designs that could also be done, then great. Once  
we get a property that can handle this properly, then new creative  
possibilities are opened up, as you imagine.

> For example, I am imagining a page similar to the one you produced,  
> but about a waterfall or stream. The text is most probably in one  
> column, but doesn't have to be. The graphics, however start at the  
> top, near the left margin (but leaving some room for text), run  
> down in a waterfall, cross the middle of the screen in a small  
> river, and drop off into a second waterfall near the right margin.
>
> This would be a wonderfully expressive layout to talk about water,  
> much as your example shows nicely the running, dripping water.
>
> As another thought, many children's books have lots of images in  
> various places on the page, surrounded by limited text. (I am  
> thinking of early reader books.)
>
> Perhaps someone has access to some examples from their children's  
> books which would show how useful floats can be when they are not  
> limited to just left and right margins and to the imaginations of  
> people who write computer manuals. (If that sounds like an insult  
> to computer manual writers, I apologize deeply. I also write  
> computer manuals at times, and they tend to get me into a very  
> limited mind set.)
>
>> You need not like the design in order to appreciate how a  
>> positioned float would open up new creative possibilities.
>>
>> To those who think Web pages should only use the browser's default  
>> style sheets, and abhor the idea of pages with creative designs,  
>> or who think the Web would be better if all pages resembled the  
>> way they looked in 1993: you need not comment, as I already know  
>> you won't like it.
>>
>>> I have a suspicion that the only time I've seen displays centred  
>>> within a column, they have have not had rectangular outlines.
>>
>
> This brings up another topic I would like to discuss and promote --  
> blocks with non-rectangular edges. Starting with simple layouts,  
> like wrapping text around non-rectangular floats, and moving on to  
> 'tiling' where all blocks fit together, but don't have rectangular  
> edges. If users could specify how the blocks tessellate -- fit  
> together -- even though the edges aren't all vertical/horizontal,  
> then CSS could place the blocks automatically, accounting for the  
> width of the window, etc. Just as current blocks are tiled, except  
> now the default is rectangles.
>
> I can hear the screams already -- we've never done that before! It  
> runs counter to the basic definition of HTML and CSS! (Only because  
> the basic definition PRESUMES that blocks are rectangular.) Sigh!  
> well -- one fight at a time.

I have also considered non-rectangular margins, perhaps based on the  
transparency of an image. It would certainly be nice to have, but  
first things first.

>
> Happy three kings day,
>
> James Elmore