I have this example template and I want to display the asides and the main as it is like the one in the picture.

[![enter image description here](https://i.stack.imgur.com/IqHpK.png)](https://i.stack.imgur.com/IqHpK.png)

Is there a problem with my positioning or using float element? Please help, cause using `margin` that has a high negative value is inappropriate to me for the design.

```css
/* 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 a {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: all 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;}
```

```html
    <!-- 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 do 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 do 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>
```