More punching

Okay, here's another one. Again, 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.

To create this layout, two main div's and three punchdiv's were used. The punch div's are empty: they do not contain text, images,... The punch div's are floated and the main div's are part of the normal flow.

The main div's are joined so they become one irregular shape. You can achieve this by setting the top margin of the second main div with a negative margin so that that div crawls up to the first and overlaps the border (give it the same border-top-color as your background color for the main div).

In Opera 7.11 i had a problem with the joining and also with the bottom navigation. When trying to join the two main div's, Opera needed so much negative margin that it messed up the layout in IE and Moz. Also, without joining the div's, the second main div jumped up enough to join the div's when hovered over the bottom navigation.

This is probably a bug (or behavior) that came along sometime after the initial release of 7.0. and will probably vanish in a future upgrade. It doesn't happen in Opera 6x.

To fix it i had to put a pair of empty division tags just after the closing p tag of the last paragraph of div#main1. Littering the html that way did Opera comply: the hover problem was solved and the div's were joined.