Previous Message
Next Message

Columns with more than one element

Sent by Steve Clay on 1 September 2005 15:03


Thursday, September 1, 2005, 6:17:35 AM, [EMAIL-REMOVED] wrote:
> It seems simple: to move an element to the right column - just change its
> style to "float:right", and the same for left.
> It works fine in IE6, as you can see here:
> http://tora.us.fm/floattest.html

IE breaks a rule of the float specs:
http://www.w3.org/TR/CSS21/visuren.html#propdef-float (was also in CSS2)
"5. The outer top of a floating box may not be higher than the outer top of
any block or floated box generated by an element earlier in the source..."

"any...floated box" means left /or/ right floated.  So you can stack floats
to one side all you want, but compliant browsers shouldn't let you stack
floats one direction then start floating blocks on the other and expect
them to slide up the side like IE does.

Eric Meyer ran into this limitation a long time ago in one of his demos:
http://meyerweb.com/eric/css/edge/slantastic/demo2.html


By adding some containers to your source I was able to /mostly/ pull this
off in compliant browsers (not IE) keeping your source order:
http://mrclay.org/tests/float_rule5

....But the fixed negative top margin eliminates this layout's ability to
handle an arbitrary amount of text.  Someone more clever might be able to
come up with a solution using more/different containers and some negative
side margin magic so that you could keep your source order and have it
accommodate any amount of text.

Steve
-- 
http://mrclay.org/ : http://frenchhorns.mrclay.org/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: