floatitis pt4
Fourth part in the anti-float series already. The method described today will be pretty similar to the margin/float method, but will eliminate floating altogether. Rather than float, we'll play around with the position:absolute property to position our elements. Not very safe and similar in its restrictions to the margin-float method, but a good companion of the margin/float when source order matters.
the basics
.header {position:relative;} .header .heading {padding-right:6em} .header .rss {position:absolute; right:0; top:0; width:5em;} Changing the position property of an element to absolute has a similar effect to floating, as it takes the element out of the document flow. But an absolutely positioned element gives you way more control over its position. It's behavior is also independent of its siblings, something that makes it a little bit more flexible to use. On the other hand, once outside the flow, it's impossible to get it back in (something which is still possible with floats - ie clearing).
Absolutely positioned elements are always positioned against a relative parent, something which needs to be defined in css. In the example above, I've illustrated an example where an rss link is included to the right of a heading (typical for news overviews and similar dynamic lists of content). The margin/float method won't be of any help to us here, as the rss link needs to be repositioned and its the second element in source.
The position:absolute method gives us a good alternative, as it can be applied to whatever element, independent of source order. The header class is given a position:relative so we can easily position it according to the heading. To make sure both heading and rss link won't overlap, the heading is given a right margin slightly bigger than the width of the absolutely positioned element.
when to use
The conditions for using this method are similar to the margin/float method, as it shares most of its limitations. I actually prefer to use the margin-float since the elements can still be cleared if really necessary, but when source order doesn't permit it, the pos:abs method comes in pretty handy.
So its best to use the pos:abs method when the absolutely positioned element is predictable in size and does not appear as first sibling. It does give you a more control over its exact position, but leaves you more open to graphic bugs when the content spills out. And always make sure the content of the absolutely positioned element doesn't overlap other content (unless it's designed that way of course)/
Finally, setting a parent to position:relative can have some serious drawbacks in IE6. Rendering issues and z-index issues might pop up from all sides at once, so be sure to always double-check IE6 for possible problems.
conclusion
Again, this is no miracle cure for floating, but its limited use, combined with the earlier methods should leave you some good alternative if you want to cut back on floating. Beware of IE6 bugs though, as the pos:abs method could give you some serious headaches there.
Next up is one final method, which will mostly be theoretical as its browser support is quite shaky, nonetheless an interesting alternative for the future. Stay tuned.