First in source

This column is first in the source, being a right float within a left-floated wrapper. The second col is floated left in that same wrapper, and following the wrapper is the left floated right col. (confusing, ain't it?)

The headings and italicized paragraphs are "widthless" and have 1px red borders to show any width problems in the columns.

Some Of The Features

Any col may be longest without problems, thanks to the fact that all the cols are floated and "within" a single container. The notorious problems that IE has with floats are negated because all the cols are floats, leaving no normal elements to interact with them and induce IE bugs. Woohoo!

A number of bug fixes have been used to make this design work well in different browsers, particularly IE/Win. Most of these can be applied in the stylesheet and forgotten, but several involve tiny dimensional differences and need to be changed when alterations are desired for the layout. Detailed instructions on this subject are to be found in the source stylesheet.

Italics can be used in this design, but when text is "justified" as well, it seems to make IE pre-calculate box widths and then calculate the width of the italics after that, forcing the box bigger than the stated width. In a float layout like this, such stupidity leads to display flaws and even destructive float dropping, so if these two properties are used in the same paragraph a couple of precautions must be used to avoid IE text buggery.

First, using the Holly hack to exclude all but IE/Win, apply to the paragraph a fairly large negative right margin. The value can be too small, but apparently can never be too big to cause harm. This layout uses -30px right margin. Then pixel size the width of the paragraph or other element to the widest width you can without float dropping at the largest text size in IE. You can determine this width by trial and error in a few minutes. Study the source to see exactly how it's done. Remember, if both text properties are used on even one word it may cause trouble unless the fix is used.

Piefecta's Dirty Little Secret

This design employs a proprietary IE property that forces a spaceless url or word to break before it cause IE to enlarge the floated box and break the layout. If the CSS must validate, place the "word-wrap" rule in a "conditional comment" (as in this demo). It's also proprietary, but validatible.

Note for IE5/Win: This fix fails in IE5/Win, alas. Also note that use of "word-wrap" in conjunction with justified text prevents IE5.5 and 6 from lining up the text on the right edge. That property has been set to "normal" in the italics test boxes to keep the text justified on the right.

A Word About Nav4

If Nav 4 must be gracefully degraded, it's best just to use a "Nav 4 only" hiding method and have all the content elements line up vertically down the page in their source order. Attempting anything else may lead to 'Disturbed coder syndrome' (DCS).

Mucho thanks to Douglas Livingstone, who developed the brilliant Negative margined floats method at the heart of this design. Thanks, Douglas! Next step is to add a "sticky footer" as shown by Paul O'Brian.

The Master of the Mac, Philippe Wittenbergh, came thru with crucial Mac fixes, as usual, along with Tedd Sperling on cleanup detail. Bruno Fassino's work on the text fixes for IE came along at just the right time. This layout is truly the result of the efforts of many coders over a long period. Thanks people.

Special Announcement!

Now, thanks to the hard work of Trevor, aka 'ClevaTreva', you may easily have a coded version of the Piefecta layout prepared for you automatically. This unsung script/css genius has crunched the incredibly complex rules of this design down into a tool so cool that all primary layout mods are a "no-brainer". Woohoo!
Proceed directly to Trevor's Page Maker.
Note: The Page Maker only works in Explorer, alas.

Holly 'n John   e-mail ©positioniseverything
Last updated: April 15, 2004
Created Feburary 19, 2004