How to Left/Right Justify Contents into Columns

reveurgam (60)in #editing • 6 years ago (edited)

In this article, I'll explain how to use the HTML <div> tag set to divide your content into two columns.

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

Divs are divisions of text that can be from a single letter or image to pages of text and images, but it is best to use it to group related text and images. There are other ways to use divs than what I'm explaining here. Divisions can be manipulated by adding classes, which are then defined through CSS and other languages, or by the defaults assigned through Steemit. Today's div classes will help you to make two columns of your content.

<div class=pull-left></div> is used to create a column on the left and <div class=pull-right> </div> a column on the right. Don't forget that closing div tag! There is also a space in between that will be filled up with additional content if you like. If you don't want anything in the middle, you can use <br>s to fill up the space.

This content is put in the left column. 😈

<div class=pull-left>This content is put in the left column. 😈 https://cdn.steemitimages.com/200x0/https://cdn.pixabay.com/photo/2014/04/03/10/29/arrow-310635_960_720.png\</div>

This content is put in the right column. 😇

<div class=pull-right>This content is put in the right column. 😇 https://cdn.steemitimages.com/200x0/https://cdn.pixabay.com/photo/2017/04/06/09/16/arrow-2207748_960_720.png</div>

This content is put in the left column. 😇

This content is put in the right column. 😈

Notice that where you place the text in the div is important.

text before the image 😱text after the image

text before the image 😶text after the image

Don't forget - most MDL tags will not work within a div!

There is supposed to be a way to full-justify text, but the method referenced on Steemit (class="text-justify") doesn't seem to work anymore.

Credits:

If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!

A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.

I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.

The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.

If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!