html - How to position two <asides> from left to right and <main> in the middle? -

i have example template , want display asides , main 1 in picture.

is there problem positioning or using float element? please help, cause using margin has high negative value inappropriate me design.

/* presets */  body {padding: 0; margin: 0;}  .container {width: 1000px; max-width: 100%; text-align: center; padding: 0; margin: 0 auto;}      /** header config **/  header {background: #075329; width: 100%; height: 100px; border-radius: 30px 30px 3px 3px;}  .dropdowndiv ul {list-style-type: none;}  .logo {float: left;}  .accountinfo {float: right;}    /* profile dropdown config */  .profile-dropdown {position: relative;display: inline-block; padding-left: 10px;}  .dropdowncaret {margin-top: -50px;border-left: 7px solid transparent;border-right: 7px solid transparent;cursor: pointer;border-top: 7px solid #1fa52c;}  .dropdowncaret:focus {border-left: 7px solid transparent;border-right: 7px solid transparent;cursor: pointer;border-top: 7px solid white;}  .profile-dropdown-content {border-radius: 10px;list-style-type: none;right: -16px;padding: 10px 10px;right: -16px;display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}  .profile-dropdown-content::before {content:'';height: 0;position: absolute;left: 150px;top: -7px;border-left: 7px solid transparent;border-right: 7px solid transparent;cursor: pointer;border-bottom: 7px solid white;}  .profile-dropdown-content {color: black;padding: 12px 16px;text-decoration: none;display: block; }  .profile-dropdown-content li:hover {background-color: green; background: linear-gradient(#277f21,#165412); border-radius: 10px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}  .profile-dropdown-content li a:hover {color: white;}  .profile-dropdown-display {display:block;}      #nav-menu, main{float: left;display: inline-block;}  	/* aside nav-menu config */  	.menuheader {margin:0; border-bottom: 2px solid black;}  	#nav-menu {position:relative;padding: 5px; border-radius: 20px 0px 20px 0px; width:200px; background-color: rgba(255, 255, 255, 0.9); text-align:center;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}  	#nav-menu nav {border-radius: 20px 0px 20px 0px;background-color: rgba(255, 255, 255, 0.9); border:2px solid black;}  	#nav-menu nav ul {margin:0;padding:0;}  	#nav-menu nav ul li{list-style-type:none; padding: 0px 10px 5px 10px;}  	#nav-menu nav ul li a{display: block; padding:10px 10px; color: black;transition: 0.3s linear;background: linear-gradient(#000000, #ffffff);border-radius: 10px;}  	#nav-menu nav ul li a:hover, #nav-menu nav ul li.current_page_item > a{color: #fff;background: linear-gradient(#09f7d7, #124706);}    	/* main config */  	.main-title {border-top: 1px solid black; border-bottom: 1px solid black; margin: 10px 0 10px 0;}  	main {border-radius:10px;margin: 15px 15px;padding: 0 10px 0 10px;background:white;width:500px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}  	main:before {content:'';position: absolute; margin: 25px -280px; border: 10px solid transparent;border-right-color: white;}    	/* main-table config */  	#main-table {width: 100%; border-collapse: collapse;}  	#main-table th {background: #4caf50; color:white;}  	#main-table th:first-child { border-radius: 10px 0 0 0;}  	#main-table th:last-child { border-radius: 0 10px 0 0;}  	#main-table tr:nth-child(even){background-color: #f2f2f2}  	#main-table td {text-align:left;}  	#main-table td:hover{background-color:#e2eac9;}    	/* aside right config */  	#aside-right {width:250px; height:auto; background:white; border-radius: 10px 0 10px 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}  	.aside-right-content {padding: 0 10px 0 10px; margin:0; auto;}  	.aside-right-title {border-top: 1px solid black; border-bottom: 1px solid black;margin:10px 0 0 0;}        	/* footer config */  	footer { padding: 5px 0; clear:both;text-align:center;height:50px; background:red; color:#fff; border-radius: 0 0 10px 10px;}  	.copyright {padding: 10px;}  	.copyrightlink {text-decoration:underline; color:#fff;}

    <!-- header -->      <header>        <div class="container">          <div class="logo">              <a href="index.php"><img src="images/usjrlogo.png" alt="logo"></a>          </div>            <div class="accountinfo">              <img src="images/profile.png" alt="profilepicture">              <div class="profile-dropdown">                  <div onclick="myfunction()" class="dropdowncaret" tabindex="1"></div>                  <ul id="mydropdownlist" class="profile-dropdown-content">                      <li><a href="#editprofile">edit profile</a></li>                      <li><a href="#logout">logout</a></li>                  </ul>              </div>          </div>        </div>      </header>        <div class="container">      	<!-- aside nav menu left div -->      	<aside id="nav-menu">      		<div class="container">      	  <nav>      		<h3 class="menuheader">menu</h3>      		<ul>      		 <li><a href="index.php">home</a></li>      		 <li><a href="#">test</a></li>      		 <li><a href="#">test2</a></li>      		</ul>      	  </nav>      	  </div>      	</aside>        	<!-- main div -->      	<main>      		<div class="container">      	  <h1 class="main-title">main title</h1>      	  <!-- dynamic table -->      	  <table id="main-table">      		  <tr>      			<th>table1</th>      			<th>table2</th>      			<th>table3</th>      			<th>table4</th>      			<th>table5</th>      			<th>table6</th>      			<th>table7</th>      			<th>table8</th>      		  </tr>      		  <tr>      			<td>content1</td>      			<td>content2</td>      			<td>content3</td>      			<td>content4</td>      			<td>content5</td>      			<td>content6</td>      			<td>content7</td>      			<td>content8</td>      		  </tr>        		  <tr>      			<td>content1</td>      			<td>content2</td>      			<td>content3</td>      			<td>content4</td>      			<td>content5</td>      			<td>content6</td>      			<td>content7</td>      			<td>content8</td>      		  </tr>      	  </table>      	  <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>      	  </div>      	</main>        	<!-- aside right div -->      	<aside id="aside-right">      		<div class="container">      	  <div class="aside-right-content">      		<h2 class="aside-right-title">side bar title</h2>      		  <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>      	  </div>      	  </div>      	</aside>        	<!-- footer div -->      	<footer>      		<div class="container">      	  <div class="copyright">      		hello      	  </div>      	  </div>      	</footer>      </div>

used 3 flexbox properties. won't work adding flexbox .container others suggest. must move footer out of first. added .container wraps around within body. details commented in snippet.

snippet

<!doctype html>  <html>    <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">    <title>00a00</title>    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>    <style>      body {        padding: 0;        margin: 0;      }      /* |||||||||||||||||||||||new ruleset|||||||||||||||||||||||||||  ||  changing outer .container flex container  ||  display:flex initiate flexbox layout   ||  justify-content: center; flex-items (#nav-menu, main, , #aside-right) form centered row  ||  flex-wrap: nowrap; flex-items stay in 1 row, not wrap new line  */            #flex {        display: flex;        justify-content: center;        flex-wrap: nowrap;      }            .container {        width: 1000px;        max-width: 100%;        text-align: center;        padding: 0;        margin: 0 auto;      }      /** header config **/            header {        background: #075329;        width: 100%;        height: 100px;        border-radius: 30px 30px 3px 3px;      }            .dropdowndiv ul {        list-style-type: none;      }            .logo {        float: left;      }            .accountinfo {        float: right;      }      /* profile dropdown config */            .profile-dropdown {        position: relative;        display: inline-block;        padding-left: 10px;      }            .dropdowncaret {        margin-top: -50px;        border-left: 7px solid transparent;        border-right: 7px solid transparent;        cursor: pointer;        border-top: 7px solid #1fa52c;      }            .dropdowncaret:focus {        border-left: 7px solid transparent;        border-right: 7px solid transparent;        cursor: pointer;        border-top: 7px solid white;      }            .profile-dropdown-content {        border-radius: 10px;        list-style-type: none;        right: -16px;        padding: 10px 10px;        right: -16px;        display: none;        position: absolute;        background-color: #f9f9f9;        min-width: 160px;        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);        z-index: 1;      }            .profile-dropdown-content::before {        content: '';        height: 0;        position: absolute;        left: 150px;        top: -7px;        border-left: 7px solid transparent;        border-right: 7px solid transparent;        cursor: pointer;        border-bottom: 7px solid white;      }            .profile-dropdown-content {        color: black;        padding: 12px 16px;        text-decoration: none;        display: block;      }            .profile-dropdown-content li:hover {        background-color: green;        background: linear-gradient(#277f21, #165412);        border-radius: 10px;        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);      }            .profile-dropdown-content li a:hover {        color: white;      }            .profile-dropdown-display {        display: block;      }      /*|||||||||||||||||||||||||||||||||||||||||||remove float||||||||||||||||||*/      /* #nav-menu,      main {        float: left;        display: inline-block;      }*/      /* aside nav-menu config */            .menuheader {        margin: 0;        border-bottom: 2px solid black;      }            #nav-menu {        position: relative;        padding: 5px;        border-radius: 20px 0px 20px 0px;        width: 200px;        background-color: rgba(255, 255, 255, 0.9);        text-align: center;        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);      }            #nav-menu nav {        border-radius: 20px 0px 20px 0px;        background-color: rgba(255, 255, 255, 0.9);        border: 2px solid black;      }            #nav-menu nav ul {        margin: 0;        padding: 0;      }            #nav-menu nav ul li {        list-style-type: none;        padding: 0px 10px 5px 10px;      }            #nav-menu nav ul li {        display: block;        padding: 10px 10px;        color: black;        transition: 0.3s linear;        background: linear-gradient(#000000, #ffffff);        border-radius: 10px;      }            #nav-menu nav ul li a:hover,      #nav-menu nav ul li.current_page_item>a {        color: #fff;        background: linear-gradient(#09f7d7, #124706);      }      /* main config */            .main-title {        border-top: 1px solid black;        border-bottom: 1px solid black;        margin: 10px 0 10px 0;      }            main {        border-radius: 10px;        margin: 15px 15px;        padding: 0 10px 0 10px;        background: white;        width: 500px;        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);      }            main:before {        content: '';        position: absolute;        margin: 25px -280px;        border: 10px solid transparent;        border-right-color: white;      }      /* main-table config */            #main-table {        width: 100%;        border-collapse: collapse;      }            #main-table th {        background: #4caf50;        color: white;      }            #main-table th:first-child {        border-radius: 10px 0 0 0;      }            #main-table th:last-child {        border-radius: 0 10px 0 0;      }            #main-table tr:nth-child(even) {        background-color: #f2f2f2      }            #main-table td {        text-align: left;      }            #main-table td:hover {        background-color: #e2eac9;      }      /* aside right config */            #aside-right {        width: 250px;        height: auto;        background: white;        border-radius: 10px 0 10px 0;        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);      }            .aside-right-content {        padding: 0 10px 0 10px;        margin: 0;        auto;      }            .aside-right-title {        border-top: 1px solid black;        border-bottom: 1px solid black;        margin: 10px 0 0 0;      }      /* footer config */            footer {        padding: 5px 0;        clear: both;        text-align: center;        height: 50px;        background: red;        color: #fff;        border-radius: 0 0 10px 10px;      }            .copyright {        padding: 10px;      }            .copyrightlink {        text-decoration: underline;        color: #fff;      }    </style>  </head>    <body>    <!--||||||||||||||||||||||||||add .container|||||||-->    <div class='container'>      <header>        <div class="container">          <div class="logo">            <a href="index.php">              <img src="images/usjrlogo.png" alt="logo">            </a>          </div>          <div class="accountinfo">            <img src="images/profile.png" alt="profilepicture">            <div class="profile-dropdown">              <div onclick="myfunction()" class="dropdowncaret" tabindex="1"></div>              <ul id="mydropdownlist" class="profile-dropdown-content">                <li>                  <a href="#editprofile">edit profile</a>                </li>                <li>                  <a href="#logout">logout</a>                </li>              </ul>            </div>          </div>        </div>      </header>      <!--||||||||||||||||||||||||||||||||||||||||||add #flex id .container||||||||||||||||||||||||-->      <div id='flex' class="container">        <!-- aside nav menu left div -->        <aside id="nav-menu">          <div class="container">            <nav>              <h3 class="menuheader">menu</h3>              <ul>                <li>                  <a href="index.php">home</a>                </li>                <li>                  <a href="#">test</a>                </li>                <li>                  <a href="#">test2</a>                </li>              </ul>            </nav>          </div>        </aside>          <!-- main div -->        <main>          <div class="container">            <h1 class="main-title">main title</h1>            <!-- dynamic table -->            <table id="main-table">              <tr>                <th>table1</th>                <th>table2</th>                <th>table3</th>                <th>table4</th>                <th>table5</th>                <th>table6</th>                <th>table7</th>                <th>table8</th>              </tr>              <tr>                <td>content1</td>                <td>content2</td>                <td>content3</td>                <td>content4</td>                <td>content5</td>                <td>content6</td>                <td>content7</td>                <td>content8</td>              </tr>              <tr>                <td>content1</td>                <td>content2</td>                <td>content3</td>                <td>content4</td>                <td>content5</td>                <td>content6</td>                <td>content7</td>                <td>content8</td>              </tr>            </table>            <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>          </div>        </main>          <!-- aside right div -->        <aside id="aside-right">          <div class="container">            <div class="aside-right-content">              <h2 class="aside-right-title">side bar title</h2>              <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>            </div>          </div>        </aside>        <!--||||||new </div> end tag location|||||||||||||||leave footer out of mid-layout||||||||||||||||||||||-->      </div>      <!-- footer div -->      <footer>        <div class="container">          <div class="copyright"> hello </div>        </div>      </footer>      <!--|||||||||||||||||||||||||||||||||||||||||original </div> end tag location||||||||||||||||||||||||-->    </div>    <!--|||||||||||||||||new .container|||||||-->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>    </body>    </html>