Block Model Additions: Float Positioning

This is another part of my investigation into the features missing  
for control ‘between blocks.’ It took a while because this is part of  
a larger and more complex area of inter-block interactions. Enjoy!

I want to start with a discussion of adding ‘position’ to the  
parameters of the ‘float’ styles. This will allow users to  adjust  
the positions of floated elements (or leave the positions alone) more  
than just ‘float: left;’ and ‘float: right;’ permit. If the block is  
floated with a value of ‘position’ then the values of the ‘position’  
style (static, relative, absolute, and fixed) come into effect and  
provide control, allowing users to float without moving, or float  
relative to the original position, relative to the enclosing block,  
and relative to the viewport. Adjusting the ‘top,’ ‘bottom,’ ‘left,’  
and ‘right’ style properties allows more control of floated elements.

NOTE for the Advanced Placement people: this feature would allow at  
least a partial answer to problem #4 in Section 8. I hope to offer  
more possible solutions to the problems presented in that section in  
future proposals.

I’m not sure exactly how flowing the text boxes and blocks around the  
‘floated’ block would work, especially when the floated element  
extends into another block. Also, positions where there is limited  
space (e.g., where only short words would fit on one side of the  
floated element) might allow some words to flow, skipping across the  
floated object and leaving other line blocks empty. This is all open  
to discussion, if the primary proposal is accepted.

A short form, using 'float: static;' and the other position  
parameters (static | relative | absolute | fixed) could set the  
'float' and 'position' parameters at the same time. This would make  
'float: static;' equivalent to 'float: position; position:  
static;' (Relative, absolute, and fixed are possible values, as  
well.) To shorten the amount you read, I will use the short form in  
my examples.

‘Float: static;’ would not move the floated element, only allow text  
and blocks to flow around it.

‘Float: relative;’ would allow the floated element to move along with  
the text and blocks which surround it, just as a ‘relative’ element  
would, except the TRBL (top, right, bottom, left) parameters could  
move the floated object relative to its original position. Perhaps  
there could be another parameter which would permit the empty space  
where the floated object originally was positioned to remain open or  
to close, although the definition of 'float' would already indicate  
that the hole would close.

‘Float: absolute;’ would allow the floated element to be positioned  
in relationship to the enclosing block. This would be the closest to  
the current ‘float: left;’ (or right), permitting more accurate  
positioning of floated elements, perhaps with:

     float: absolute; top: auto; bottom: auto; left: 0; right: auto;

producing the same effect as ‘float: left;’

Finally, ‘float: fixed;’ would place the floated element relative to  
the viewport. This might be harder to program, since the inline,  
text, and regular blocks would need to be ‘reflowed’ every time the  
viewport or the elements displayed in it changed. (Perhaps this could  
be delayed until a later release, although it seems that it might be  
very useful to designers.)

Of course, the control of the size of the floated object is another  
feature of this procedure, offsetting the increase in the complexity  
of the styles. Using the older ‘float: left;’ would still be  
possible, keeping backwards compatibility with prior styles.


James Elmore

Received on Friday, 20 July 2007 22:11:55 UTC