Blogging Tip: How to Write Text On Two Columns in Steemit?

gadrian (66)in #steemit • 6 years ago

Before we switch switch to a different topic, I thought we should wrap up this mini-series of tutorials by continuing on yesterday's idea.

Remember I asked if you can find another usage for the floating divs, as they are permitted in Steemit? Have you found any?

Yes? Great! What have you thought about?

No? That's ok, you can think more until tomorrow. Here's a hint...

That might've been the discussion, if I would've been your teacher. But I'll spare you of the memories (and of the homework), good or bad.

We learned yesterday how to insert an image within the text, without breaking it (text flows around the image).

Let's see today how we we can write on two columns.

As you might imagine from the way I've started, it's very similar to what we did yesterday.

Here's an example:

Left Column

This text goes on the left column.
The text is aligned to the left.

I'll also add an image below:

Right Column

This text goes on the right column. The text is also aligned to the left.

You can see further in the post how you can center the text from these columns.

Inside divs, normal markdown language seems to be ignored, and I used HTML tags like <b> to make text bold.

Ok, so here's the code you should use to write text on two columns:

<div class="pull-left">
left column content goes here
</div>
<div class="pull-right">
right column content goes here
</div>

If you want the text (and images) of your columns to be centered, enclose the divs between <center> and </center> like this:

<center>
<div class="pull-left">
left column content goes here
</div>
<div class="pull-right">
right column content goes here
</div>
</center>

To break out of the two-column logic one method is to use after the divs a text divider, as I've used in this example, otherwise when we write more text, it will continue to fill in the shorter column. We talked more about text dividers here. In HTML, there are other ways to do this, but Steemit only accepts a subset of HTML tags with almost no attributes, to reduce the risks of abuse.

So, what can you use two columns for?

Two column content can be a great choice if you have a combination of small images and text or many small images.

It can also be a great way to write bilingual content. @alexvan has done this successfully for a long time.

I hope you found this mini-series useful, the next post will have a completely different topic.

Stay tuned and steem on!

#blogging #blogging-tips #steemit-tutorial #steemithelp