How to design a two column post - Wie man einen zweispaltigen Post gestaltet [english/german]

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@shortcut·
0.000 HBD
How to design a two column post - Wie man einen zweispaltigen Post gestaltet [english/german]
http://www.steem-it.de/images/matrix_bett.jpg

<div class="pull-left"><h3>Hey guys,</h3>I recently have been asked again, how I design my bilingual posts using this two-column layout.<br><br>I learned it from <a href="https://steemit.com/steemit/@movievertigo/how-to-make-2-and-3-column-layouts-for-your-posts-without-tables">this post</a> by @movievertigo and it's quite easy if you know some <em>html</em>.<br><br>Below is the code, I use as my template:<br><br></div>
<div class="pull-right"><h3>Hallo Leute,</h3>ich werde immer wieder gefragt, wie ich meine zweisprachigen Posts mit diesem Layout gestalte.<br><br>Ich habe es durch <a href="https://steemit.com/steemit/@movievertigo/how-to-make-2-and-3-column-layouts-for-your-posts-without-tables">diesen Post</a> von @movievertigo gelernt und es ist eigentlich ganz einfach, wenn man ein wenig <em>Html</em> beherrscht.<br><br>Den nachfolgenden Code benutze ich als Vorlage:<br><br></div>
<hr>

<img src="http://www.steem-it.de/images/code.png">

You can download the code <a href="http://pastebin.com/4hx0w7PM">here</a>!
<hr>
<div class="pull-left">As you can see, every layout-instruction between the <img src="http://www.steem-it.de/images/pull-left5.png"> and <img src="http://www.steem-it.de/images/pull-right3.png">  has to be written in <b>html</b> rather than <b>markdown</b>.<br><br>To finish the two-column block you should use a horizontal rule <br><img src="http://www.steem-it.de/images/hr3.png"> <br>cause if you don't, your layout might get broken on mobile devices and such.<br><br>After that you can switch back to <b>markdown</b>, if you prefer.<h3>I hope, this information is useful and you will try it out!</h3><br><br></div>
<div class="pull-right">Wie ihr sehen könnt, müssen die Layout-Anweisungen zwischen <img src="http://www.steem-it.de/images/pull-left5.png">  und <img src="http://www.steem-it.de/images/pull-right3.png">  alle in <b>Html</b> statt in <b>Markdown</b> geschrieben werden.<br><br>Zum Abschluss solltet ihr auf jeden Fall noch eine horizontale Linie<br><img src="http://www.steem-it.de/images/hr3.png"><br>einfügen, da es euch sonst zB. auf dem Smartphone das Layout zerschießt.<br><br>Danach könnt ihr dann aber auch wieder ganz normal <b>Markdown</b> verwenden, wenn euch das lieber ist.<h3>Ich hoffe, dieser Tipp ist hilfreich und du probierst ihn einmal aus!</h3><br><br></div>
<hr>
@shortcut
http://www.steem-it.de/images/footer3.jpg
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,