user4873951
Reputation:
How to position two <asides> from left to right and <main> in the middle?
I have this example template and I want to display the asides and the main as it is like the one in the picture.
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.
/* 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;} <!-- 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>Upvotes: 1
Views: 1541
Answers (4)
zer00ne
Reputation: 43880
Used 3 flexbox properties. It won't just work by adding flexbox to .container as others suggest. You must move the footer out of it first. Added a .container that wraps around everything within the body. Details are 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 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>Upvotes: 1
Kary
Reputation: 238
I would recommend using display:flex instead of position and float. It's responsive, flexible and simply better. Try some thing like this:
.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;
}<div class="container">
<aside class="aside-left"></aside>
<main class="main"></main>
<aside class="aside-right"></aside>
</div>Upvotes: 1
shivam Gupta
Reputation: 441
just add display:flex to container.Take footer outside of container
<div class="container" style="display:flex;">
<aside id="nav-menu"></aside>
<main></main>
<aside id="aside-right"></aside>
</div>
<footer></footer>
Upvotes: 0
hungerstar
Reputation: 21685
I recommend the flexbox solution by shivam Gupta but if you need to modify your code I have a solution.
Float all three elements to the left - <aside id="nav-menu"></aside>, <main> and <aside id="aside-right"></aside>. Then either adjust the padding on #nav-menu (it's making it 210px wide and all three elements won't fit in .container) or use box-sizing: border-box; so the width property includes padding and borders.
/* 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;
}<!-- 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>Upvotes: 0
Related Questions
- How do I position my layout to have my aside next to my section?
- Positioning elements on opposite side using CSS
- how to position elements one to left and other right one below the other- CSS
- How do you align two divs up and down with a <aside> on the right?
- How to align aside as sidebar?
- How do I align a div inside aside in relation to aside?
- How to place an aside column to the right of main content?
- Making an <aside> element a specific part of a page?
- How do I make the aside have the width of the remaining area?
- How do I tell an aside tag which side to go on?