如何从左到右定位两个<asides>，在中间定位<main>？

Question

我有这个示例模板，我想显示旁边和主要，因为它就像图片中的那个。

我的定位或使用浮动元素有问题吗？请帮助，因为使用具有高负值的margin对我来说不适合设计。

＆＃13;

＆＃13;

/* 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;}

＆＃13;

    <!-- 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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用了3个flexbox属性。如其他人所建议的那样，通过向.container添加flexbox，它不会起作用。您必须先将页脚移出它。添加了.container包裹身体内的所有内容。详细信息在Snippet中进行了评论。

<强>段

＆＃13;

＆＃13;

<!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 the outer .container into a flex container
||  display:flex Initiate Flexbox layout 
||  justify-content: center; flex-items (#nav-menu, main, and #aside-right) will form a centered row
||  flex-wrap: nowrap; flex-items will stay in one row, they will not wrap to a 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 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;
    }
    /*|||||||||||||||||||||||||||||||||||||||||||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 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;
    }
  </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 to this .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 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>
      <!--||||||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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议使用display：flex而不是position和float。它的响应性，灵活性和简单性更好。尝试这样的事情：

＆＃13;

＆＃13;

.container {
     display: flex;
     flex-direction: row;
     width: 80vw;
     margin: 0 auto;
}
.aside-left {
    width: 25%;
    height: 40px; 
    background:red;
}
  .main {
    width: 50%;
    height: 40px;
    background:gold;   
}
.aside-right {
    width:25%;
    height: 40px;
    background: blue;
}

＆＃13;

<div class="container">
 <aside class="aside-left"></aside>
 <main class="main"></main>
 <aside class="aside-right"></aside>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将display:flex添加到容器中。在footer之外取container

<div class="container" style="display:flex;">
    <aside id="nav-menu"></aside>
    <main></main>
    <aside id="aside-right"></aside>
</div>
<footer></footer>

Answer 4

我推荐 shivam Gupta 的flexbox解决方案，但如果您需要修改代码我有解决方案。

将所有三个元素浮动到左侧 - <aside id="nav-menu"></aside>，<main>和<aside id="aside-right"></aside>。然后调整#nav-menu上的填充（它使其宽210px并且所有三个元素都不适合.container）或使用box-sizing: border-box;以便宽度属性包括填充和边框。

＆＃13;

＆＃13;

/* 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;
}


/* ASIDE NAV-MENU CONFIG */

.menuheader {
  margin: 0;
  border-bottom: 2px solid black;
}

#nav-menu {
  box-sizing: border-box;
  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 {
  float: left;
  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;
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;