This post is about the HTML div element. Controlling divs is useful for things I have been exploring lately like Revealjs and Dash.

For example, to position two texts side by side in Dash,

# divs
import dash_html_components as html
import dash
import dash_table
import pandas as pd

app = dash.Dash(__name__)

app.layout=html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
        html.P('This conversion happens behind the scenes by Dashs JavaScript front-end'),
        ]),
    html.H2('Bye Dash'),
    html.Div([
    	html.Div('Bye dash, it was nice knowing you.',style={'width':'10px','float':'left'}),
    	html.Div('Is it gonna be side by side?',style={'margin-left':'1000px'})
    	],style={'width':'100%'})
])

if __name__ == '__main__':
	app.run_server()

Jupyter notebooks are a great way for testing out these html tags, use cell magic and CSS inline style

%%HTML

<h1>This is an H1</h1>

<div style="color:blue;margin-left:30px; width:100%;">
<div style="color:blue;margin-left:300px; width:200px;float:left;">A check mark, checkmark or tick is a mark (✓, ✔, etc.) used (primarily in the English speaking world) to indicate the concept "yes" (e.g. "yes; this has been verified", "yes; that is the correct answer", "yes; this has been completed", or "yes; this [item or option] applies to me"). The x mark is also sometimes used for this purpose (most notably on election ballot papers, e.g. in the United Kingdom), but otherwise usually indicates "no", incorrectness, or failure. </div>
<div style="color:red;padding-top:70px">This text was copied from wikipedia</div>
</div>

I will add a reference sheet on HTML later for the things I use frequently.

References