Comparison of the Various Box Model Hacks

September 2002

This page will test your browser's reactions to various box model hacks. Gray blocks are control blocks. They contain no hacks. They should render properly in all browsers. Unfortunately there are browsers that don't even get the basics correctly.

The blocks are background color coded. Each color (except for gray) utilizes a different type of box model hack. Here is the guide to the colors:

Color Codes for the Test Blocks
Background Color Type of Hack Remarks
gray none Control Block
pink Tantek Çelik Hack  
purple Simplified Box Model Hack (SBMH)  
light yellow Modified SBMH  
light green Alternate Box Model Hack Technique 1  
bright green Alternate Box Model Hack Technique 2  
dark green Alternate Box Model Hack Technique 3  

Below are two sets of tests. One uses percentage values for width and padding while the other uses pixels.

Note: Because of the character escapes utilized in the Tantek Hack and the SBMH all styles in this page will be ignored by NS4.x.

div.cent0 { background: #ccc; }
div.cent1 { width: 100%; background: #ccc; }
div.cent2 { padding: 0 10%; width: 80%; background: #ccc; }
div.cent-tantek { padding: 0 10%; background: #fcc; } div.cent-tantek { width: 100%; voice-family: "\"}\""; voice-family: inherit; width: 80%; } html>body div.cent-tantek { width: 80%; }
div.cent-sbmh { padding: 0 10%; width: 80%; background: #ccf; } div.cent-sbmh { \width: 100%; w\idth: 80%; }
div.cent-modsbmh { padding: 0 10%; width: 80%; background: #ffc; } * html div.cent-modsbmh { width: 100%; w\idth: 80%; }
div.cent-tech1 { padding: 0 10%; width: 100%; width/* */:/**/80%; width: /**/80%; background: #cfc; }
div.cent-tech2 { padding: 0 10%; width: 80% !important; width: 100%; width/**/:/**/80%; background: #6c6; }
div.cent-tech3 { padding: 0 10%; width: 80% !important; width /**/: 100%; background: #090; }
div.px0 { padding: 0; width: 600px; background: #ccc; }
div.px1 { border-left: 20px solid #999; border-right: 20px solid #999; padding: 0 30px; width: 500px; background: #ccc; }
div.px-tantek { border-left: 20px solid #c00; border-right: 20px solid #c00; padding: 0 30px; background: #fcc; } div.px-tantek { width: 600px; voice-family: "\"}\""; voice-family: inherit; width: 500px; } html>body div.px-tantek { width: 500px; }
div.px-sbmh { border-left: 20px solid #00c; border-right: 20px solid #00c; padding: 0 30px; width: 500px; background: #ccf; } div.px-sbmh { \width: 600px; w\idth: 500px; }
div.px-modsbmh { border-left: 20px solid #990; border-right: 20px solid #990; padding: 0 30px; width: 500px; background: #ffc; } * html div.px-modsbmh { width: 600px; w\idth: 500px; }
div.px-tech1 { border-left: 20px solid #080; border-right: 20px solid #080; padding: 0 30px; width: 600px; width/* */:/**/500px; width: /**/500px; background: #cfc; }
div.px-tech2 { border-left: 20px solid #080; border-right: 20px solid #080; padding: 0 30px; width: 500px !important; width: 600px; width/**/:/**/500px; background: #6c6; }
div.px-tech3 { border-left: 20px solid #080; border-right: 20px solid #080; padding: 0 30px; width: 500px !important; width /**/: 600px; background: #090; }