picture
Individual

Esoteric CSS tip

Warning: Arcane information. Use at own risk. Disclaimers apply. Not valid where prohibited. Close cover before striking.
The CSS2 specification says that absolute positioning is with respect to the “containing box”. You might think that the containing box for an element would be the box that contains the element—its immediate ancestor in the document tree. It is. But only if the containing box is positioned.
(1)
But suppose you want to position an element absolutely within what is otherwise a perfectly ordinary div. Numbered equations come to mind. You want the number on the right. Or, as in this paragraph, you want a number at the right and more or less centered with respect to the paragraph text.
Here’s
how
Here’s how to do it. Turn your garden-variety div into a positioned element by giving it the attribute position: relative. A relatively positioned box is first given its position in the “normal flow”, and then offset from that position according to the top or bottom, left or right attributes. Since you want the paragraph to have its usual position, set top and left to 0em. Now it’s a “positioned” paragraph, even though it’s exactly where it would be if it weren’t.
Φ
Inside that positioned paragraph insert a div with its position attribute set to absolute. It will treat the relatively positioned paragraph that contains it as its “containing box”, and the coordinates you give it for its position will be with respect to the boundaries of that paragraph. For the main text of the paragraph, enclose it inside a div that has enough padding to keep it from overlapping with the absolutely positioned box (unless you want overwriting). To make sure that the main text overwrites the text in the absolutely positioned box, set the z-index of the div containing the main text to 3, say, and that of the absolutely positioned box to 1. Below is the skeleton of the code for this paragraph:
<div style="position: relative; top: 0em; left: 0em;">
<div style="position: absolute; bottom: 0%; left: 0%; width: 100%; height: 50%; color: #eedddd; text-align: center; vertical-align: center; font-size: 12em; z-index:1">
Φ</div>
<div style="position: relative; top: 0em; left: 0em; padding-right: 0em; padding-bottom: 0em; text-indent: 18pt; z-index: 3">
Inside that positioned paragraph…</div>
</div>
Ψ
Using this trick enabled me to line up the bars nicely in the previous entry in this weblog. You could do this with a table, but it’s not always easy to control column widths. Browsers seem to have their own ideas about sizing table columns, even when you specify the widths. Or again the Φ in the previous paragraph could be a background image. But a background image has to be edited separately. The Ψ extends over two paragraphs, which must both be given the attributes position: relative and z-index: 3.
The trick works in Omniweb, Safari, and Firefox (all on the Mac). Firefox doesn’t recognize text-shadow, so the “bullet” in the first paragraph doesn’t look right.

LinkJune 28, 2006 in Web/Tech