CSS Test Pages

skip to Navigation

design fragments

Overflown DL menu

Sets the submenu to be overflown if the list gets awfully long. It has satellite dt boxes for some notes on the list.

Drop-down definition list menu

It can handle more styling than a normal “ul li ul li” drop-down menu.

Absolutely positioned box glue solvent

A bottom standoff for an absolutely positioned box, that is, a sort of margin beyond the box to allow for scrolling beyond the box.


Is there an overflow strategy for a fixed width table?

cross-column vertical alignment

How to vertical align floating elements in two columns? Here I use "1px spacer floats" to accomplish cross-column vertical aligned pull-outs in an em-based flexible layout.

display: inline-block – aligning blocks in a line

When elements (say, for a catalogue) have to build a “line”‚ and wrap like a text line, inline-block has some advantages over floating.

definition list

The dl used for link lists here on this site. Term and definition side-by-side and vertically aligned, an attempt.


An attempt for two columns with equal height.

column-swapping, revisited

We're discussing the needs of two columns with different em-width. IE6, FF1+, Op8 are fine. It breaks IE5Mac, though.

bugs, spec. violation

Overlaps and Gaps

Gecko browsers attempt to render exactly, but this can lead to measurements and offsets with fractional pixels in some em-based designs, resulting in 1px overlaps and gaps due to rounding errors.

Fx: steps in text lines

Firefox shows steps in text lines of a float when placed over an area with overflow:auto. Increase/decrease the text size. See also bugzilla.

IE6: forgotten background-image

Another dimensional bug with disappearing background.

IE6: un-contained float and its bounding rectangle

When a float expands the wrapper of its parent.

absolutely positioned element and percentage width

For absolutely positioned elements, the percentage should be calculated with respect to its containing block. But what happens when the containing block is not the parent? Some browser fail ...

absolutely positioned parent's width set to auto and static child has a percentage width

A stress for the shrink-to-fit algorithm ... then the resulting layout is undefined in CSS 2.1

Site Navigation

Navigation: CSS

Ingo Chao
Spieringstr. 10
21029 Hamburg
+49 (0)40 79419099