Punching anybody?

Just some filling text

This layout is created by using some floating and margin. On the right and bottom edges of the float are black borders, on the top and left edges there are no borders at all. The float has -1px margins on the top and left sides. By doing so, the float overlaps the border set on the main div, thus covering up the black border with the background of the float. To make this work in IE/Win you also have to relatively position the float.

The Css is embedded in the source code, so just take a look. I owe a huge "thank you" to Eric Meyer, who came up with the idea and is much better in explaining how it works. You can see his demo here.

Use anything you like

This time the left float has a small navigation panel.

As you can see, there is also a float at the right side of the main content.

It's the same method as used with the one float, except now you need have three of the borders and only pull the float one pixel to the left. What ever element could be floated, for instance links, images etc.

Of course, in this case the trick for IE/Win is also needed: the relative position.