Punching anybody?

 a  rectangular icon

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.

Isn't this nice ?

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.

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.


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

You can get your W3C stuff at the W3C site

The W3C Logo

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.

The Creative Commons Licence logo