Horizontally stack components

Dash Python
2

You can kind of think of html Div objects like building blocks where each Div you put into an HTML page ‘climbs up from the bottom’, and as a default is flushed left. Thus it will place itself where it either hits the top of the page or another Div block.

Let us look at your layout code. Basically you have something like

app.layout = html.Div([ #big block
    html.Div( #small block upper most
    dcc stuff in here
    ),
    html.Div( #smaller block in middle
    dcc stuff in here
    ),
    html.Div( #smaller block at the bottom
    dcc stuff in here
    ),
])

This can be seen as you have one big block with three smaller Div blocks inside it which are placed top down as explained in my comments.
If you on the other hand does something like this:

app.layout = html.Div([ #big block
    html.Div( #small block upper most
    dcc stuff in here
    ,style={'width': '49%', 'display': 'inline-block'}), #notice style variable which wants a dict of CSS
    html.Div( #smaller now moved up beside the first block
    dcc stuff in here
     ,style={'width': '49%', 'display': 'inline-block'}), #notice style variable which wants a dict of CSS
    html.Div( #smaller block at the bottom
    dcc stuff in here
    ),
])

Now I have two blocks beside each other, and a single one below. A few notes:

  • The style variable is where you specify how things should look inside the given html.Div object. You might want to look up some CSS to see how you can manipulate with Divs.
  • Initially a Div will have a width of 100% of the screen width. I am setting the widt to 49% before declaring inline-block display to be sure that the two Divs are narrow enough to fit the same line.

I hope this makes sense, if not you might be able to convince me to try and illustrate it in paint or something. :slightly_smiling_face:

11 Likes