![Untitled-1.jpg](https://steemitimages.com/DQmbNzdjp2uANtVRXfmf3N2MGMabK8YzAtkasygt2ZXy4cQ/Untitled-1.jpg)
![Untitled-2.jpg](https://steemitimages.com/DQmNYsuRyzsijDWtd8bqoJp7qnM3ZcxeF9tDPxaVwhonmeo/Untitled-2.jpg) #### This question has been asked many times by some of my followers so I decided to write a detailed post on how to do it! Note that with the current Steemit editor, there is no super easy way to do this, so this guide will be helpful to those who really want to use these features in their posts! #### I'll start with the short guide, aimed at those proficient in html, then proceed with a more detailed guide. #### By the way, left or right alignment only works in markdown mode! https://steemitimages.com/DQmbqDHuS2coYXQewCs7ynPPFBJH5LAyW97ZdKjapHaBY4U/1.jpg *** ## Short Guide #### Use ```

``` for left alignment and ```

``` for right alignment. Each div must be closed with a ```

```.
*** ## Detailed Guide #### Let's start with left alignment as an example. In markdown mode, enter the following html code, which is also known as a div block: ![pull-left.jpg](https://steemitimages.com/DQmRAgLjM5WeoLfwafjX7oZA8YPUzMgqxjyoEvuFbRMeQuZ/pull-left.jpg) #### Now whatever you put in between ```

``` and ```

``` will be left-aligned up to the middle of the page, as the following image demonstrates. https://steemitimages.com/DQmRNFDfNjhvnkB4nUAjiWRwzeJ7D6TxzmemXmoe9Tzac2u/left1.jpg https://steemitimages.com/DQmdAADQU2RC9hvHY5gtgvsdxPC4f8qN6ZffKBroXxWPSJ8/left1b.jpg #### Anything you write outside of the closing ```

``` will start to wrap around the first div block. The following illustrates. ![left2.jpg](https://steemitimages.com/DQmU5qiCW3ydxVB2wxp6mRntabws3UrC9CkfGZqsJMsxsMi/left2.jpg) ![left2b.jpg](https://steemitimages.com/DQmYGvJt7D2v2RzkE1U8mzAjuD51JzN39nPUbdYwBUm5qyB/left2b.jpg) #### Let's continue by adding a right-aligned section! See below that by adding another ```

``` block, we added another section of material that is aligned to the right of the page, again with the stuff inside the block only going as far as the middle of the page. ![right1.jpg](https://steemitimages.com/DQmNMtbhEfajAHELPctKsLRbr2BL3wRvPJVqgc5CwRLXnWn/right1.jpg) ![right1b.jpg](https://steemitimages.com/DQmXdKsJhx9ua8qtnFmTLHw9TnmuNXHimFcqZRd5xHrgYEy/right1b.jpg) #### Now if I start adding text or images to the outside of this new div block, it will start on the left and if I add enough stuff, it will eventually wrap under the right aligned material! ![right2.jpg](https://steemitimages.com/DQmVrmRjLNsHTLtbpKc2B9P9h71hxHim7V74Fk3wypZQFPb/right2.jpg) ![right2b.jpg](https://steemitimages.com/DQmRt6tPKgHvAjegtoWYFX25DBttzgfdUzq2GCjRMVev7pD/right2b.jpg) *** #### That about covers it! The rest is only limited by your imagination! Have fun and Steem on! #### If you have any questions please don't hesitate to ask! #### Please re-steem this article if you found it useful to help spread the information around!

Hope you enjoyed this post! I strive hard to provide quality content :)

My goal is to share with this wonderful community my passion in photography, and hopefully contribute to the awesome inspirational content on Steemit.

I read and try to respond to all comments, and welcome any photography related questions and feedback!