How to make 2 and 3 column layouts for your posts without tables

Recently Steemit added some new formatting features to allow you to wrap text around images in blog posts. I realised today that this can also enable you to make multi-column text posts which resemble the formatting style of newspapers.

Now, you have been able to something similar to this before with tables, but I've never been able to remove the table border and I think with this method you have more control over the width of the columns.

Using this method you can make either 2 column or 3 column sections and I will give you an example of each and then describe how to do it.

Note: The 2 column layout works fine on mobile browsers, but there are issues with the 3 column layout.

2 column example

2 column tutorial

Simply wrap the text for your first column with a <div class="pull-left"> tag at the start and </div> closing tag at the end. Then have the text for your second column following this, wrapped up with a <div class="pull-right"> tag at the start and </div> at the end.

e.g.

<div class="pull-left">
Text for my first column goes here.
</div>
<div class="pull-right">
Text for my second column goes here.
</div>

Be aware that a lot of Markdown styling won't work, but you can always replace it with the equivalent HTML tags. e.g. <b> for bold, <em> for italic, and if you want a paragraph break, use <br><br>

If you want to drop back to a single column after your two column section, you'll need to add as many line breaks as you have lines in your longest column at the end, so just keep adding a load of <br><br><br><br>s until you get a gap.

3 column example

3 column tutorial

The 3 column layout is similar in nature to the 2 column layout, but you will have to do a lot more manual formatting to adjust the sizes of the columns. Start as before with text for your first column, wrapped with a pull-left div block. Now you'll need to go through the text adding <br>s so that no one line is longer than a third of the width of the page in the post preview.
e.g.

<div class="pull-left">
Make sure that these<br>
lines don't get to be<br>
more than a third of the<br>
width of the page.
</div>

Now do the same for your THIRD column (Yes, that's right, the THIRD column), but wrap it up in a pull-right div block.

Finally add the text for your SECOND column. This won't need to be wrapped up in a div block or manually formatted as it will simply flow down in-between the first and the third columns.

If your columns are a little too close together for your liking and you want to add some padding, one way is to replace the spaces of the last line of either the first or third columns with   to stop it wrapping, then add more  s to the end of the line to make it wider.