Your float is showing

bsweeney — Fri, 21 Nov 2008 20:27:37 +0000

Float styling is a useful aspect of CSS … until it’s not. When a floated element occurs inside a container and you want it to be wholly in that container you have to resort to hacks to do so. Or do you? Never content to assume that a question has been resolved, I decided to see if anyone had come up with a new method of clearing a float. Lo and behold a solution has emerged, and the solution is so simple as to defy logic: apply overflow: auto to the container element. I’ll leave the full explanation (with examples, alternatives, and warnings) to the experts.

Of course, there can be advantages to the default float rendering. Most notably I found it useful for creating some nice formatting around blockquotes, such as in our textbook analysis report.

CSS Quirk: opacity

bsweeney — Fri, 10 Oct 2008 19:50:49 +0000

Elements with opacity styling are stacked independent of their containing object. As a result, any positioned elements that do not have a z-index declaration and that appear in the HTML code prior to an opacity-styled element will appear underneath the opacity-styled element (see example). This is the defined behavior in the CSS specification, though currently only gecko- and WebKit-based browsers (Firefox, Safari, Chrome) exhibit the “quirk” in question. From the CSS3 Working Draft:

… implementations must create a new stacking context for any element with opacity less than 1.
CSS Color Module Level 3: Working Draft 21 July 2008

Project 2061 Techlog » style

Your float is showing

CSS Quirk: opacity