Multiple containers sit on top of each other

If we add multiple outer containers they sit on top of each other.

This can currently be solved by adding a <table> element, but that defats the point of Get Off The Table

Line 86 in f2c6ef7

    
           <!-- Adding a table makes it work on Outlook, without this is sits on top of the previous content -->

We may well be able to do this with an aditional div or by playing around with the mso-element-wrap

Stig found this works <br clear="all"> :)
It leave a bit of a large gap, not looked into why yet but should be fixable

Adding style="mso-break-type:section-break" to the clear-all <br> appears to reduce the size of the gap, but not significantly.

Ah nice, also it looks like we don't need the clear="all" here anymore with that, so can just use
<br style="mso-break-type:section-break">

These sections appear to be applied as <div class="WordSection1"> <div class="WordSection2"> etc.

With this css

@page WordSection1
  {size:8.5in 11.0in;
   margin:1.0in 1.0in 1.0in 1.0in;}
   div.WordSection1
   {page:WordSection1;}

So I think the spacing is coming from that margin but I'm not too sure currently how to remove that.