How to properly add style to my Dash App?

Question

I cannot add properly the CSS style to my Dash App.

I want to create a Dashboard with a side bar on the left and on the right a top bar with some metrics and the plots below, like this:

So, in my App.py file I have:

app = dash.Dash()
app.layout = html.Div(
            className="content",
            children=[

html.Div(
    className="left_menu",
    children=[
        html.Div(
            'This is the left menu'
        ),
    ]
),

html.Div(
    className="right_content",
    children=[
        html.Div(
            className="top_metrics",
            children=[
            'This is top metrics'
            ]
        ),
        html.Div(
            'This down top metrics'
        ),
    ]
),

if __name__ == '__main__':
app.run_server(debug=True)

And the css file:

.content{
 width: 100%;
 background: #F7F7F7;
 }

.right_content{
 width:85%;
 position:absolute;
 top: 0;
 right: 0; 
 }

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:85%;
 position:absolute;
 top: 0;
 right: 0;
 }

.left_menu {
 width: 15%;
 position: absolute;
 top: 0;
 left: 0;
 height: 100vh;
 z-index: 999;
 background: #2A3F54;
}

However, I get this:

I do not understand why "This down top metrics" appears there and not below "top metrics"

Answer 1

Here make following for your .top_metrics:

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:100%;
 position:relative;
 top: 0;
 right: 0;
 }

But I would recommend you to use bootstrap, where you dont have to write the css but just include the class name on your divs.

Bootstrap offers css that will give you the classes to structure your layout and html divs with responsive design for different screen sizes.