Box in the Box

This is an experiment where i tried creating a "box in the box" effect. The concept is achieved by having a container surrounded with a border and absolutely positioned 5 smaller boxes in it.

In each small box is another smaller box placed and so on, so i get 4 boxes inside one small box.

I chose for fixed measures because you can make things come out simply by calculating it. Using a mix of percentages, px, em's will create some complex calculations that might lead to rounding errors and other cross-browser anomalies.

IE has difficulties with box sizes under 20 px. It can get the width but not the height, so those small inner boxes will distort the design: the boxes will be stretched out vertically.

Fortunately there is a hack for this, provided to me by a real guru named "trx" (he lives on several css lists, so you probably have encountered his posts). The only thing needed in the code is a html comment, but it has to be placed precisely. It must come just after the last opening tag in a box sequence and just before the first of the closing tags that follow. You can see how it works when you take a look at my code.

• Box
• The Box: sequel
• The Box: 3D

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

• Contact
• Tools
• Blog
• Linkage
• Technical

Friends

People who have been good enough to me that I would call them friends.

• Adrian
• DarkBlue
• Erik Sagen
• Gordon
• Phil

You can get your W3C stuff at the W3C site

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.