Hi, I am trying to to make two divisions and inside each divisions there are two divs, one uses the 35% of the width for the paragraph text that explains the graph and the another division uses the remaining 65% of the width for plotting the graph. Even two outer divisions are seperate, the text from the second division appears in the first one.
problem can be seen here in the pic -
The code that I am using to make the plot -
###### Runs Distributions
html.H2("Runs Distributions"),
# Histogram of Runs Distributions
html.Div(
[
html.Div(
[
html.P(
"We can see that the distribution is right skewed. Many "
"players makes low or medium runs, while few players makes "
"lots of runs. The median of this distribution is 126 which "
"means that 50% of the players makes less than 126 runs and "
"50% more than this. 406 is the 90th percentile, meaning 90% "
"of the players makes less than 406 runs. So, any players who "
"is making more than 400 runs in a season is really doing well. "
"They are in the top 10%."
)
],
style={
"width": "35%",
"display": "inline-block",
"margin-top": "60px",
},
),
html.Div(
[dcc.Graph(id="runs-dist-plot", figure=runs_dist_plot)],
style={"width": "65%", "float": "right", "display": "inline-block"},
),
],
style={"margin": "40px 0"},
),
# Kernal density estimation of Runs distributions
html.Div(
[
html.Div(
[html.P("Gonna Write something.")],
style={
"width": "35%",
"display": "inline-block",
"margin-top": "60px",
},
),
html.Div(
[dcc.Graph(id="runs-kde-plot", figure=runs_kde_plot)],
style={"width": "65%", "float": "right", "display": "inline-block"},
),
],
style={"margin": "40px 0"},
),
can anybody help me with this? Can’t able to understand where am i making the mistake.