Adding multiple columns

[M-J-Robbins]

We need the ability to add multiple columns inside the main container.

Also multiple columns inside a column would be cool too :)

[M-J-Robbins]

This code will create 2x 200px columns, one floated left one floated right.

However they float to the edge of the screen and when you place it inside the container everything goes bad :(

  <div style="background:pink; 
              mso-element-frame-width:200px;
              mso-element:para-border-div;
              mso-element-left:left;
              mso-element-wrap:around;" >
    left
  </div>
  <div style="background:purple; 
              mso-element-frame-width:200px;
              mso-element:para-border-div;
              mso-element-left:right;
              mso-element-wrap:around;" >
    right
  </div>

[M-J-Robbins]

Judging by this I don't think we can get a frame to create a multi cell table. However I'm thinking we might be able to start messing around with VML groups to create columns.

The theory is along these lines

Which could produce something like this

<v:group>
  <v:shape>
    <v:textbox>
      One
    </v:textbox>
  </v:shape>
  <v:shape>
    <v:textbox>
      Two
    </v:textbox>
  </v:shape>
</v:group>

[M-J-Robbins]

I tried the above idea and made some progress with this code however;

• The 3 columns don't quite align properly
• Requires a fixed height

    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style='width:250px;v-text-anchor:top;height:400px;' fillcolor="#ff0000" stroke="f" >
    <div>
      <h1>
        heading 1
      </h1>
      <p>
        1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis tellus. In laoreet posuere mi, eu mattis ipsum mattis at. Quisque rutrum, ante sit amet commodo dapibus, lectus erat fermentum mi, eu elementum eros quam vel neque.</p>

      <img src="https://dummyimage.com/300x200/eeeeff/996666&text=IMG" alt="test" width="200">
          <br clear="all">
    </div>
  </v:rect>

    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style='width:250px;v-text-anchor:top;height:400px;' fillcolor="#00ff00" stroke="f" >
    <div>
      <h1>
        heading 2
      </h1>
      <p>
        2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis tellus. In laoreet posuere mi, eu mattis ipsum mattis at. Quisque rutrum, ante sit amet commodo dapibus, lectus erat fermentum mi, eu elementum eros quam vel neque.</p>

      <img src="https://dummyimage.com/300x200/eeeeff/996666&text=IMG" alt="test" width="200">

    </div>
  </v:rect>

    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style='width:250px;v-text-anchor:top;height:400px' fillcolor="#0000ff" stroke="f" >
    <div>
      <h1>
        heading 3
      </h1>
      <p>
        3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis tellus. In laoreet posuere mi, eu mattis ipsum mattis at. Quisque rutrum, ante sit amet commodo dapibus, lectus erat fermentum mi, eu elementum eros quam vel neque.</p>

      <img src="https://dummyimage.com/300x200/eeeeff/996666&text=IMG" alt="test" width="200">

    </div>
  </v:rect>

[M-J-Robbins]

Some column info in this old powerpoint doc, might be worth looking at http://www.mdcfug.com/meetings/ServingWord.ppt

Along with the column info here https://stigmortenmyre.no/mso/html/word/wdconsectionbreaks.htm