Simon Willison’s Weblog

CSS Trickery

New CSS Experiment: Trickery with Floats and Negative Margins, inspired by this message on css-discuss. By applying both position: relative and a negative margin to a floated element it is possible to pull it out of the flow of text in to the margin of the document. I have used a variant of this technique in the third revision of my SitePoint in CSS demonstration.

Posted 15th August 2002 at 4:06 pm

This is CSS Trickery by Simon Willison, posted on 15th August 2002.

View blog reactions

Next: Hacking Las Vegas

Previous: Fun with FOLDOC

5 comments

MIE5.2/mac: http://www.xs4all.nl/~apple77/floattrickery.jpg (26K) It is not working... :( Gecko gets it right though.
Kris - 15th August 2002 17:01 - #
See also, at roughly the same time: http://lists.w3.org/Archives/Public/www-style/2002 Aug/0132.html http://www.damowmow.com/mozilla/demos/sidebars/dem o.html
Ian Hickson - 15th August 2002 17:08 - #
How bizzare - I'm subscribed to that list (don't read it much though) and I completely missed that thread. I knew it was too obvious an effect for no one else to have played with it, weird that those demos came out on the same day though :) Shame about IE Mac - anyone got any ideas how that can be fixed?
Simon - 15th August 2002 17:34 - #
Actually on further inspection the sidebars/demo.html version uses clear:left rather than position:relative. I'll have to play around with that and see what happens. I just wish I had a mac :/
Simon - 15th August 2002 17:38 - #
And I wish I had a PC/Unix machine, for this purpose
Kris - 16th August 2002 07:51 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2002/08/15/CSSTrickery