Text and Image side by side

How do I place the text and image side by side each other?
See https://i.imgur.com/kn2sRSG.jpg
I like that color code image to be the same line with the blue text.
My code below:
dcc.Tab(label=‘Map Display’, children=[
html.Div([
html.H4(“Singapore Map of Automated Meter Reading (AMR) installation”),
html.Iframe(id=‘map’, srcDoc = open(’/home/tanthiamhuat/DataAnalyticsPortal/data/SingaporeMap.html’,‘r’).read(), width=‘100%’,height=‘450’),
html.Div(‘Click on the individual block/customer to see its Index Reading Rate. The percentage range with its corresponding colour code is shown:’,
style={‘color’: ‘blue’, ‘fontSize’: 12}),
html.Img(src=‘data:image/png;base64,{}’.format(encoded_image.decode()),width=‘50%’,height=‘25’)
])
]),

When you define the style of your html.Div() container, you need to specify ‘display’: ‘inline-block’ in order to accept Div’s stacking next to each other.
Example will stack vertically:

html.Div('interesting stuff'),
html.Div('More intersting stuff')

Example allow horizontal stacking:

html.Div('interesting stuff', style={'display': 'inline-block'}),
html.Div('More intersting stuff', style={'display': 'inline-block'})
```
1 Like

Thanks for posting a solution Blaceus. Any chance you also have tips on how to ensure the text and image are the same height?

You could ensure this by putting two sub-divs inside a “mother div”, where the two sub-divs are containing the text and image respectively.
And then put a static height restraint on the sub-divs and giving them the ‘display’: ‘inline-block’ property aswell.
I.e you’ll have something like this:

html.Div(
   html.Div('here is some text', style={'display': 'inline-block', 'height': '200px'}),
   html.Div('here is an image', style={'display': 'inline-block', 'height': '200px'})
)

The produced result will then be something like:
example

1 Like