When do I need to use html.Div?

Dash Python
1

Hello everyone,

I’m working on my first application and I have a question regarding the usage of html.Div. I have no error in my program and the application is working just fine for now, but I’d like to understand what I’m writting. For now I’m referring to the guide and some threads from this forum or other forums.

I noticed that I get exactly the same layout for my graphs “compare_graph_3”, “4”, “5” and “6” with this code. But as you can see, I encapsulated graphs 3 and 4 with html.Div, while 5 and 6 are not encapsulated. Same for the titles (H4).

                        html.Div([
                                html.H4("Graphiques en barres comparant les deux produits", style={'textAlign': 'center'})
                        ]),

                        html.Div([
                                dcc.Graph(id='compare_graph_3')
                        ], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),
                        html.Div([
                                dcc.Graph(id='compare_graph_4'),
                        ], style={'width': '49%', 'display': 'inline-block'}) ,
                                    
                        html.H4("Score environnemental 'PEF' et DQR par produit", style={'textAlign': 'center'}),
                        
                        dcc.Graph(id='compare_graph_5', style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),
                        dcc.Graph(id='compare_graph_6', style={'width': '49%', 'display': 'inline-block'})

I just also noticed that using this code gives the same results for graphs 3 and 4:

                        html.Div([
                                dcc.Graph(id='compare_graph_3', style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),
                                dcc.Graph(id='compare_graph_4', style={'width': '49%', 'display': 'inline-block'})
                        ]),

Here’s the screenshot:

image
image2415×986 60.2 KB

I’d like to understand when I need to use a html.Div and when I do not? Surely I’m mistaking, but I think I saw in the guide that sometimes html.Div is used, sometimes it’s not.

Could you give me some advices about this?

Thank you very much,
Regards,
Alpy