How to adjust the div as below image? - php

Question

I want adjust my div like this,
<------------------header--------------------->
========================================================
tree structure table div
==
== =
== ===========================================
== = graph div = drop down div
==
== =
=
=========================================================
footer
My code is,
<?php
include("Config.php");
if(isset($_POST['submit'])){
if(!empty($_POST['check_list'])) {
echo"<div style=\"width: 100%; height:7%; background-color: green; color: white; id=header;\">";
echo"</div>";
echo"<div style=\"width:20%; height:86%;color: white; background-color:pink;class=page-container;\">";
<---------some codes---------------->
echo"</div>";//tree div ends
echo"<div style=\"width:80%; height:38%; background-color: skyblue; color:white;float:left;\">
right div1";echo"</div>";
echo"<div style=\"width: 20%; height:50%; background-color: lightblue; color:white;float:left;\">
right div2";echo"</div>";
echo"<div style=\"width:300px; height:53%; background-color:orange; color: white; float:left;\">
right div3";echo"</div>";
echo"<div style=\"width: 1600px; height:5%; background-color: green; color: white; float:left; left;\">
footer div";echo"</div>";
}//inside if ends
?>
can any one help me I am struggling a lot to do this.

Answer 1

a simple solution with flex with the use of external CSS as your shouldn't write all the styles as inline.
I used only HTML in order to show the result but i think you can easily echo it wth PHP later.
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
header,
footer {
min-height: 50px;
background: green;
}
.container {
flex: 1;
display: flex;
}
.sidebar {
flex: 1;
background: red;
}
.left {
flex: 2;
background: pink;
display: flex;
flex-direction: column;
}
.top,
.bottom {
flex: 1;
background: blue;
}
.bottom {
display: flex;
}
.bottom>div {
flex: 1;
background: linear-gradient(to right, yellow, black);
}
<header></header>
<div class="container">
<div class="sidebar"></div>
<div class="left">
<div class="top">
</div>
<div class="bottom">
<div></div>
<div></div>
</div>
</div>
</div>
<footer></footer>

Answer 2

Using flexbox you could do it like this. However, I would recommend splitting out the CSS from the PHP file.
<?php
include("Config.php");
if(isset($_POST['submit'])){
if(!empty($_POST['check_list'])) {
echo '<style type="text/css">
body {
margin: 0;
}
.header, .footer {
width: 100%;
height: 3rem;
background: green;
}
.content-wrapper {
height: calc(100vh - 6rem);
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
}
.left-col {
width: 20%;
background: pink;
height: 100%;
}
.right-col {
width: 80%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.cell {
background: #ccc;
}
.dark-blue {
width: 100%;
flex-grow: 1;
background: steelblue;
}
.light-blue {
width: 70%;
background: aqua;
}
.orange {
width: 30%;
background: orange;
}
</style>';
echo '<div class="header">Header</div>
<div class="content-wrapper">
<div class="left-col">Pink</div>
<div class="right-col">
<div class="cell dark-blue">Dark blue</div>
<div class="cell light-blue">Light blue</div>
<div class="cell orange">Orange</div>
</div>
</div>
<div class="footer">Footer</div>';
}
}
?>