Multiple divisions layout issues

Dash Python
1

I am trying to get a layout as shown in the attached image:

image
image.png1161×622 12.4 KB

However, what I am getting is each ‘row’ below the other. I have read all of the other threads I can find and thought I understood how to nest each row/ column inside one another, but apparently not.

So I started with a master row to house all the figures. Then inside this I created a div for the left long figure, then 2 rows for the other figures. Any help would be greatly appreciated.

app.layout = html.Div(
[
	html.Div(
		[
			html.H1(
				'Heading',
				className='eight columns'
			),
			html.Img(
				src='image url',
				className='one columns',
				style={
					'height': '100',
					'width': '275',
					'float': 'right',
					'position': 'relative'
				},
			)
		],
		className='row'
	),
	html.Div(
		[
			html.H5(
				'Client,
				id='client',
				className='three columns'
			),
			html.H5(
				'Site',
				id='site',
				className='six columns',
				style={'text-align': 'center'}
			),
			html.H5(
				'heading',
				id=tank_fuel,
				className='three columns',
				style={'text-align': 'right'}
			)
		],
		className='row'
	),
	html.Div(
		className='row',
		children=[
			html.Div(
				[
					dcc.Graph(
						id='map_graph',
						figure = map_figure
					)
				],
				className='four columns'
			),
			html.Div(
				className=('row', 'eight columns'),
				children=[
					html.Div(
						[
							dcc.Graph(id='ISO1_graph')
						],
						className='three columns',
						style={'margin-top': '20'}
					),
					html.Div(
						[
							dcc.Graph(id='ISO2_graph')
						],
						className='three columns',
						style={'margin-top': '20'}
					),
					html.Div(
						[
							dcc.Graph(id='ISO3_graph')
						],
						className='three columns',
						style={'margin-top': '20'}
					)
				]
			),
			html.Div(
				className='row',
				children=[
					html.Div(
						[
							dcc.Graph(id='water_gauge')
						],
						className='four columns',
						style={'margin-top': '10'}
					),
					html.Div(
						[
							dcc.Graph(id='temp_gauge')
						],
						className='four columns',
						style={'margin-top': '10'}
					)
				]
			)
		]
	)
],
className='ten columns offset-by-one'

)

2

Apologies if this is late. Check to see if you have included your respective css link in your code e.g.

app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’})