Re: flowing around both sides of a float

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

Happy three kings day,

James Elmore