How to right align a simple Div

Community Support
1

Hello again,
can someone tell me how to align a div to the very right side on the screen?
so I have a Div looking like this:
headLine = Div(text='''<h1>"This is my title"</h1>''', styles={"color":"blue","text-align": "right"})

but when i do
show(headLine)
it looks like this:

issue
issue1914×483 11.6 KB

so it takes the text color, but not the alignment.

The same question is for placing an image with Div.
I can not place it to the right side on the screen. I thought this is an easy problem, but it seems like a hard one for me :sweat_smile:

Can someone please help me with this problem?
Thanks very much in advance

2

Are you sure the text is not right-aligned inside a div that is only just exactly as wide as the text?

3

Sadly, yes. It is only shown on the right side. But yesterday a friend helped me out with this and we found a solution, that worked for me.

left_div = Div(text=f"""<div style="text-align: left;"><h1>this is my fancy Title</h1></div>""")

This syntax above worked for me. Just in case anyone else has this problem.
One step fruther: to have my title on the very left side and a Logo (image) on the very right side on the screen, I had to use a Spacer to work propperly. so my code looks then like this:

logo = ".\testPic.png"
left_div = Div(text=f"""<div style="text-align: left;"><h1>{title}</h1></div>""") # Create the left Div with text
right_div = Div(text=f"""<div style="text-align: right;"><img src="{logo}" alt="Placeholder Image"></div>""",width=297, height=132)  # Create the right Div with logo
spacer = Spacer(sizing_mode="stretch_width") # Spacer to fill the space between the left and right Divs
headLine = row(left_div, spacer, right_div, sizing_mode='stretch_width') #align everything in a row
show(headline)

Its a little hacky, but works for me.

1 Like