create account

How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by steemitguide

View this thread on: hive.blogpeakd.comecency.com
· @steemitguide ·
$19.33
How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor
<img src="http://www.steemimg.com/images/2016/12/06/block_11e010.png" alt="block_11e010.png" border="0">
<center>**Using Steemit's Raw Markdown Editor can get a bit tricky if you're a beginner, 
so in this post I will tell you exactly how you can  include multi-column text in your next Steemit post**</center>

This method allow's you format Text into 2 column sections, this type of formatting Style is commonly found in Newspaper & Magazines. Using 2 columns not only to make text reading more comfortable, but it also allows to make a better use of the space on the page
<center>http://www.igniteliving.com/wp-content/uploads/2007/11/text-columns.jpg</center>
## Example
**2 Columns**

<div class=pull-left>Long lines of text can be hard to read, so doing multiple columns breaks the lines up to something more optimal.	
In type-setting there is actually a sweet spot between too short lines (eyes have to constantly jump lines) and too long lines (when jumping a line it's hard to figure out which line is the next one and not accidentally skip a line). </div>
<div class=pull-right> It was shown, by experiment, that optimal amount of text for print material is ~60 characters per column. Higher amount of characters per column interferes with brain's ability to scan through text easily, much like you need to break text into paragraphs for same reason</div>
>An alternative method to Display Content
                                
**You can simply copy paste the code below into your Raw Editor and change my Text!**

> \<div class=pull-left>
> Write you first Column Text right here followed by closing Markdown Code
> \</div>
> \<div class=pull-right>
> Now write the Text of your 2nd Column, keep in mind that some Markdown Styling won't Work
> \</div>

The First Step is to wrap the text for your first column by typing out the Markdown Code   <br>**\<div class=pull-left>** tag followed by the content and **\</div>** the closing tag to complete the first Column. After that you'll have do the following again for the second column however the first Markdown code will be **\<div class=pull-right>** (instead of pull-left it's pull-right) tag at the start and **\</div>** at the end

<center><img src="http://www.steemimg.com/images/2016/12/06/steemitcolumns4e6cc.jpg" alt="steemitcolumns4e6cc.jpg" border="0"></center>

# Column Style Editing
 
In the first Example, I showed you how to include a Column using Raw Editor, now it's time to learn how to edit your column in the scenario where you wish to change your font style or include paragraph

If you try to make certain text **bold** or *Italic* in the column you'll notice that your Markdown Code is not functioning. To bypass this, you can still use HTML tags to style and edit your Text.

### Here is the Equivalent HTML tag for Bold, Italic and Paragraph Break
**\<b>** for **bold**
**\<em>** for *italic*
**\<br>\<br>** for Paragraph Break (Leave the Next Sentence Blank)

Keep in mind that Markdown styling won't work when using a Markdown code to construct Columns, 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>**
____
# Here are some other Guides you might find Interesting
[Tutorial on how to use Unicode Characters on Steemit; Includes Cheatsheet on Smileys icons and Symbols&#128526;](https://steemit.com/steemitguide/@steemitguide/steemitguide-tutorial-on-how-to-use-unicode-characters-on-steemit-includes-cheatsheet-on-smileys-icons-and-symbols-which-are)

[HowTo Make Use of a Steemit Feature that allow's you to display content floating left & right and learn how to paragraph](https://steemit.com/steemit/@steemitguide/steemitguide-howto-make-use-of-a-steemit-feature-that-allows-you-to-display-content-floating-left-right-and-learn-to-paragraph)

[Align Text, Images, Videos & GIF's to the Center of Post using Markdown Raw Editor](https://steemit.com/markdown/@steemitguide/align-text-images-videos-and-gif-s-to-the-center-of-post-using-markdown-raw-editor)
_____
<p>
<div class=pull-right>
<a href="http://steemimg.com/image/DFFlx"><img src="https://storage.googleapis.com/steemimgimgs/2016/10/18/steemitguide47985.png" alt="steemitguide47985.png" border="0" /></a>
</div>

Doesn't this go well with the SteemVerify Logo? Anyways, if you spot an error in any of my Guides please feel free to correct me and also if there is anything you would like to see a Guide on, let me know! Dedicated young Steemian interested in getting Vested. Will write another tip on Markdown Codes Soon, Follow me for more!
 </p>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 45 others
properties (23)
authorsteemitguide
permlinkhow-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor
categorysteemit
json_metadata{"tags":["steemit","steemitguide","steemit-help","markdown","steemit-tutorial"],"image":["http://www.steemimg.com/images/2016/12/06/block_11e010.png","http://www.igniteliving.com/wp-content/uploads/2007/11/text-columns.jpg","http://www.steemimg.com/images/2016/12/06/steemitcolumns4e6cc.jpg","https://storage.googleapis.com/steemimgimgs/2016/10/18/steemitguide47985.png"],"links":["https://steemit.com/steemitguide/@steemitguide/steemitguide-tutorial-on-how-to-use-unicode-characters-on-steemit-includes-cheatsheet-on-smileys-icons-and-symbols-which-are","https://steemit.com/steemit/@steemitguide/steemitguide-howto-make-use-of-a-steemit-feature-that-allows-you-to-display-content-floating-left-right-and-learn-to-paragraph","https://steemit.com/markdown/@steemitguide/align-text-images-videos-and-gif-s-to-the-center-of-post-using-markdown-raw-editor","http://steemimg.com/image/DFFlx"],"app":"steemit/0.1","format":"markdown"}
created2016-12-06 15:26:12
last_update2016-12-06 15:26:12
depth0
children11
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value17.460 HBD
curator_payout_value1.874 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,616
author_reputation35,147,549,313,619
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id1,933,257
net_rshares41,771,582,299,533
author_curate_reward""
vote details (109)
@ace108 ·
Thanks. this is good information. I figure out something to do with this.:-)
👍  
properties (23)
authorace108
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161207t013903978z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-07 01:39:06
last_update2016-12-07 01:39:06
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length76
author_reputation1,223,633,346,763,508
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,938,046
net_rshares492,003,082
author_curate_reward""
vote details (1)
@boxcarblue ·
Very useful resource! Thanks! How about doing one about right aligning images and wrapping text around them in the future? I would really like to know how that is done.
👍  
properties (23)
authorboxcarblue
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t210956024z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 21:09:57
last_update2016-12-06 21:09:57
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length168
author_reputation146,814,664,095,567
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,936,044
net_rshares492,003,082
author_curate_reward""
vote details (1)
@careassaktart · (edited)
Thanks for this! It helped a lot!
properties (22)
authorcareassaktart
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20181221t150302328z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-12-21 15:06:15
last_update2018-12-21 15:06:36
depth1
children0
last_payout2018-12-28 15:06:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length33
author_reputation110,479,520,896,954
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,178,710
net_rshares0
@enternamehere ·
Thank you for sharing - I find the information in your posts super helpful :D
👍  
properties (23)
authorenternamehere
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t202218824z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 20:22:15
last_update2016-12-06 20:22:15
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length77
author_reputation22,091,759,078,723
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,935,658
net_rshares492,002,037
author_curate_reward""
vote details (1)
@hitheryon ·
Nice tutorial - Thanks for sharing this!
👍  
properties (23)
authorhitheryon
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t161123951z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 16:11:24
last_update2016-12-06 16:11:24
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length40
author_reputation59,824,519,867,793
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,933,604
net_rshares492,002,037
author_curate_reward""
vote details (1)
@ianstrat ·
Invaluable information. Many thanks
👍  
properties (23)
authorianstrat
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t162539516z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 16:25:48
last_update2016-12-06 16:25:48
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length35
author_reputation12,786,084,463,699
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,933,728
net_rshares492,002,037
author_curate_reward""
vote details (1)
@kate-m ·
$0.10
I've been wondering about this - want to do bilingual posts in the future - THANK YOU!
👍  
properties (23)
authorkate-m
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20170912t230702610z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2017-09-12 23:07:03
last_update2017-09-12 23:07:03
depth1
children0
last_payout2017-09-19 23:07:03
cashout_time1969-12-31 23:59:59
total_payout_value0.075 HBD
curator_payout_value0.024 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length86
author_reputation1,210,258,549,746
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,706,046
net_rshares35,608,915,117
author_curate_reward""
vote details (1)
@keik ·
Cool~
👍  
properties (23)
authorkeik
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t153647674z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 15:36:24
last_update2016-12-06 15:36:24
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5
author_reputation5,595,679,739,347
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,933,356
net_rshares492,002,037
author_curate_reward""
vote details (1)
@kiwideb ·
Very handy - thanks!
👍  
properties (23)
authorkiwideb
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t190813895z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 19:07:06
last_update2016-12-06 19:07:06
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length20
author_reputation58,559,345,437,295
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,935,069
net_rshares492,002,037
author_curate_reward""
vote details (1)
@mbuyukyoruk ·
Thanks man! I really liked this and will use this every time. Appreciated that.
properties (22)
authormbuyukyoruk
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20171229t180702611z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2017-12-29 18:07:03
last_update2017-12-29 18:07:03
depth1
children0
last_payout2018-01-05 18:07:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length79
author_reputation2,121,692,220,757
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,917,926
net_rshares0
@milimali ·
Thanks for this!
👍  
properties (23)
authormilimali
permlinkre-steemitguide-how-to-insert-2-columns-and-edit-text-style-with-equivalent-html-tags-using-steemit-s-raw-markdown-editor-20161206t161353306z
categorysteemit
json_metadata{"tags":["steemit"]}
created2016-12-06 16:13:51
last_update2016-12-06 16:13:51
depth1
children0
last_payout2017-01-06 16:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length16
author_reputation1,859,226,500,511
root_title"How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,933,632
net_rshares492,002,037
author_curate_reward""
vote details (1)