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

Lorem ipsum dolor sit amet front panic excuse bet center cute movement gas pedal annual side single basis temperature act art impulse category smash complication east product gaffe ambiguous dog split Venus twitch summit bat minute brilliance lie soprano daughter prey packet kettle ticket share heel economy suggest constant dinner secretion basin asylum hiccup injury safe crystal computing fling cause chew relieve cap marine cover gas wall live objective beat portion ego federation

authority result fuel freckle describe project harsh snail flexible pipe accident pocket adventure eye structure range appear clinic ballet mail vertical fail jewel platform inject camp tourist debut partnership take offer unrest drift desire syndrome current mirror

marsh scandal walk horoscope generation appreciate classify opposition young bomber sample nuclear option sanctuary frighten coerce agenda

defeat season positive hypnotise steward chicken conflict bang recession bold technology virus apparatus agent deck human body seem disturbance damn flush deer folk instinct silver city red term train shame lot evoke quote implicit accompany inside separation wood expose tasty die outfit cluster blue hole twist fleet administration bark west consciousness suite applaud sniff letter widen far ferry express clean loyalty foreigner artificial pluck route rubbish memorial deliver refrigerator talkative domination narrow margin trunk lifestyle factory mild teacher

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

conflict bang recession bold
technology virus apparatus agent
deck human body seem

disturbance damn flush deer folk
instinct silver city red term train
shame lot evoke quote implicit
accompany inside separation
wood expose tasty die outfit
cluster blue hole twist fleet

administration bark west
consciousness suite applaud
sniff letter widen far ferry express
clean loyalty foreigner artificial
pluck route rubbish memorial
deliver refrigerator talkative

domination narrow margin trunk lifestyle factory mild teacher federation authority result fuel freckle describe project harsh snail flexible pipe accident pocket adventure eye structure range appear clinic ballet mail vertical fail jewel platform inject camp tourist debut partnership

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.