Multiple containers sit on top of each other

[M-J-Robbins]

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

https://github.com/M-J-Robbins/get-off-the-table/blob/f2c6ef7bdfea0e43c69de561702219ef3e1ddcaa/template.html#L86

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

[M-J-Robbins]

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

[heyitstowler]

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

[M-J-Robbins]

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.