Piefecta Return to p.i.e.

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

This image demonstrates how floated items are no problem in the layout

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).

This image demonstrates how floated items are no problem in the layout

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, automagically!  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!


Holly 'n John   Contact Holly Contact John ©positioniseverything
Last updated: November 30, 2005
Created Feburary 19, 2004

Second in
source

Here is a left float test box.

This column is floated and also negatively margined to the left, so it is "pulled" out of its container except for a single pixel that is kept within the container.

Italics can be justified as long as the paragraph gets the proper IE bug fixing, as described in the center col. This rigid layout makes such pixel control easy.

Here is a right float test box.

Tweaking the cols can be very confusing due the interlocked nature of the layout, but colored backgrounds on all divs can greatly help this process. Using borders to mark the divs will make them wider and cause float dropping.

Long left col demo

Third in
source

Here is a right float test box.

This column is floated, and then negatively margined to the right, pulling it nearly outside its container just like the left column.

Italics can be justified as long as the paragraph gets the proper IE bug fixing, as described in the center col. This rigid layout makes such pixel control easy.

The source contains a great deal of commentary on the code used in this layout. It's not for the squeamish, but even semi-skilled CSS coders will be able to wrangle this design to meet most site requirements.

Here is a left float test box.

This layout is known to work in: IE5/Win and up, Opera 6-7, Mozilla for both Win and Mac, IE/Mac, Safari, and Omniweb 5.

Long right col demo


Ribbet!

Here is an "absolute" box, which stays at the col bottom.

AP again. The side cols have bottom padding to avoid these boxes.