✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Using containers to separate two sections of a page

I would like to wrap the two sections of the page so that I can modify their css styles separately. With the current layout, the updating css of one html div applies to other as well.

The two sections of the page are within separate

. Here’s my code:
layout = html.Div([

   html.Div([

       dbc.InputGroup(
               [
                   dbc.InputGroupAddon("Property Address"),
                   dbc.Textarea(),
               ],
               style={'margin-top':'30px', 'width': '50%', 'float': 'left'},
           ),

       #html.Hr(),

       dbc.InputGroup(
               [

                   dbc.Label("Property type"),
                   dbc.RadioItems(
                       id='prop-input',
                       options=[
                           {"label": "Office", "value": 1},
                           {"label": "Retail", "value": 2},
                           {"label": "Industrial", "value": 3},
                           {"label": "Flex", "value": 4},
                       ],
                       value=1,
                       style={'margin-left':'8px'}
                   ),

               ],
               className="mb-3",
               style={'margin-top':'20px','width': '80%', 'float': 'left'},
       ),

       dbc.InputGroup(
               [
                   dbc.Label("Deal Type"),
                   dbc.RadioItems(
                       id='deal-input',
                       options=[
                           {"label": "New", "value": 1},
                           {"label": "Renewal", "value": 2},
                       ],
                       value=1,
                       style={'margin-left':'8px'}
                   ),

               ],
               className="mb-3",
               style={'margin-top':'20px','width': '70%', 'float': 'left'},
       ),

    ], style={"width": "60%", "font-size":"1.08em", "margin-top": "2%", "margin-left": "60em", "float": "left"}),


    html.Div([
        # Plot properties map
        dcc.Graph(id='map-graph1',
                  style={'display': 'inline-block', 'width': '900px', 'float': 'left', 'margin-top': '-26em', 'height':'700px', 'margin-left':'5px'}
        ),
    ], style={"width": "38%", "margin-top": "5%", "margin-left": "0%", "margin-right": "1%"}),

])

I would either

  1. Give different CSS classes (E.g. style-1 and style-2) via the className parameter directly to the components in the divs

  2. Give different CSS classes (E.g. style-1 and style-2) to the containers (the html.Div) via the className parameter.

Then, in the .css file (e.g. ./assets/99_styling.css if root folder is .) I would define the separate styles. For method 1, using normal css selectors syntax;

elementname.style-1 {
    padding: 40px 100px 40px 50px;
}

and for method 2, using

div.style-1 elementname {
    padding: 40px 100px 40px 50px;
}

Which targets any html element elementname that is inside div with class style-1.