Clear Positioned Elements
A revised script that addresses the issues brought up in the comments of this post and a subsequent post on the same topic is available for discussion in Absolute Clearance.
Paraphrasing one of Mike Davidson’s comments on Andy Budd’s alarming (but painfully realistic) An Objective Look at Table-based vs. CSS-based Design:
The CSS spec (or browser makers’ implementation of it) should not take absolutely positioned elements completely out of the document flow. You should be able to put two absolutely positioned columns inside a master div and then create divs after that master div which appear unconditionally below those two columns…
And as long as we can chose between this new behavior or the equally powerful, traditional behavior I am in complete agreement. So I whipped up a simple script that allows us to do just that. It forces a relatively positioned element (just
<div>s at this point) to expand and, in effect, “clear” the contents of the absolutely positioned elements contained with in it—regardless of their depth.
Here’s a very simple header/two column/ footer example and a more complex example featuring multiple nested cleared absolutely positioned elements.
onload you will want to remove the last line,
window.onload = SI_clearAbsolutes; and add a call to
SI_clearAbsolutes(); in your initialization function.) Then add a class of
si-clear-absolutes to any elements that contain absolutely positioned columns. That’s it.
<div> tags) to recreate the effect of a standardized HTML element—which brings us back to Andy’s original post. Your thoughts?