Before tackling this page, you should be totally familiar with the principles outlined in the Banded Pages and Angles page of this project.

In this demonstration, we will be dealing with concepts of overlapping angled and non angled sections to make other shapes and square off angles.

If this sounds daunting, it is not. Just imagine you have a series of paper cut out angles Sections and you wanted to overlap them to make other shapes. You would simply slide one under another. This is all we will be doing here.

Once again, we will be using negative margins to achieve this but thanks to Sections automatic proportional sizing it is really easy if you follow a couple of simple rules a long the way.

Some of the following content has Sections with semi transparent backgrounds so that you can see one Section overlapping another. This is obviously just for demonstration purposes.

Recall that with out default settings of **Top and Bottom Margin** set to **None** , our two sections will directly abut.

To stop the angles overflowing this area and anything below, we will just set the top margin of the blue section to auto and the bottom margin of the green section similarly.

This will be our starting point.

In order to construct different angles and thus do things like squaring off the bottom of a section, to make a wedge shape it is important to remember that the section will skew around its horizontal center point.

Notice the center of rotation and that the green section is overlapping the blue one on the right and underlapping it on the left by the same amount.

Fortunately Sections Pro provides us with a magic number to handle this gracefully.

To remove the white space on the left and ensure that we get a full overlap, we use this simple rule:

**Set the negative margin equal to the difference in angles (as a percentage using the proportional setting).**

Angle: -3 deg

Angle: -6 deg

Angle: -3 deg

Angle: -6 deg

Top Margin: -3%

Just remember that the negative margin MUST be set to PROPORTIONAL and that half the angle will cause an overlap of half the width.

The above layout is not that useful but we can now construct some real world use cases.

Difference in angles = 4

therefore

Top Margin -4%

NOTE: Browser rounding errors can mean that occasionally you may need to adjust this value up or down by a few fractions of a percent. Just see how it looks on the page first.

So far, we have had some content in the green section to show the settings. In reality, we want it to be just as high as it needs to be to square off the angle.

Think about what we already know. The difference in angles as a percentage will give us half the height of the angle.

So all we need to do is set the bottom padding on the green section to be **half our magic number** - in this case 2% as the angle is 4 degrees.

Angle: -4 deg

Angle: 0 deg

Top Margin: -4%

Angle: -4 deg

We can now create some Sections that demonstrate our skills, changing the angle and square off the first and last Section

And that, ladies and gentlemen, is how we do that.