Réf. : Re: Stylings only possible with Tables

James Elmore proposed:
> Markup:
> <body>
>   <div id=header />
>   <div id=body />
>     <div id=leftbar />
>     <div id=content />
>     <div id=right />
>   </div>
>   <div id=footer />
> </body>
> and styling
> div#body { flow:horizontal; height:*}
> div#body > * { height: * }
> div#body > div#content  { width: * }
>
> All blocks inside div#body will be placed horizontally 
> in single row (flow:horizontal) 
> and will have height of content box of div#body 
> (second CSS rule)
> div#body will take height left from #header and #footer 
> in the view (first rule).
> And div#content will take full height of #body 
> and width left from #leftbar and #rightbar (third rule).

I like the idea, which corresponds to what many of 
us find quasi-impossible to achieve without tables.

Could it also be achieved via a "blocky" variant 
of float?
. Same markup
. Styling
    div#leftbar { float: left, blocky }
    div#right   { float: right, blocky }
    div#content { float: blocky }
where "blocky" says: the floated element extends
to the full height of its containing element after 
all the content of the latter has been resolved. 

This would, for example, allow you to set the 
background of a sidebar on the sidebar itself
rather than having to kludge it on the container
(so easy with table cells!).

Minimal impact on incremental rendering (?).

I'm guessing that if the container has other content
without "float: blocky" defined it should be treated 
as though it was a single blocky div, i.e. fills the 
remaining horizontal space and stretches the container
if it's taller than the floated siblings.

So, in fact (just thinking aloud here) you could 
specify "float: blocky" (or "float-strategy: blocky"?)
on the containing element instead and get fairly 
reasonable results in older browsers. This would 
also avoid the confusion that might arise if a div
contained some floats with and some without the
blocky parameter.

And I wonder if a "blockx" variant that triggers
the same automatic filling along the x axis rather
than the y axis might be useful for languages where 
text flows vertically rather than horizontally.
Of course you'd then need float:top and 
float:bottom.


Les Brown

Received on Sunday, 24 June 2007 11:00:15 UTC