How to place an aside column to the right of main content?
How to place an aside column to the right of main content?
I am creating a self-help website for practice purposes only. I'm having trouble placing an 'aside' column (containing relevant quotes throughout history) on the right-side of my main content (excluding title & footer).
The 'float' property places the aside column to the right of all the content, but places it at the bottom. I have tried using 'flexbox' and this seems to solve the problem regarding the 'aside' element, but it places the footer vertically on-top of the content (& covering part of it) instead of horizontally at the bottom, along with moving the header to the left of the content (it should be at the top under the static nav-bar). This is what it does:
Can anybody help me? I'd really appreciate it.
body
display: flex;
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
font-family: garamond, serif;
#navbar
position: fixed;
right: 0;
left: 0;
.links
margin: 8px;
padding: 16px;
background-color: orange;
-webkit-border-radius: 75%;
text-decoration: none;
color: black;
font-weight: 900;
transition: opacity 0.5s linear;
.links:hover
opacity: 0.30;
width:
header
font-size: 25px;
padding-top: 30px;
color: orange;
text-shadow: 8px 8px 16px grey;
#section1
padding-top: 8px;
#section2
padding-top: 16px;
padding-bottom: 16px;
section p
text-align: justify;
#asideh2
text-align: center;
aside
font-size: 12px;
width: 15%;
text-align: justify;
float: right;
footer
justify-content: space-between;
background-color: #d3d3d3;
font-size: 12px;
padding: 8px;
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Self-Help Emporium</title>
</head>
<body>
<nav id="navbar">
<a class="links" id="link1" href="#">Home</a>
<a class="links" id="link2" href="#">About</a>
<a class="links" id="link3" href="#">Blog</a>
<a class="links" id="link4" href="#">Contact</a>
<a class="links" id="link5" href="#">Disclaimer</a>
</nav>
<header>
<h1>Self-Help Emporium</h1>
<h2>Your Trusted Source for Self-help Material</h2>
</header>
<article>
<section id="section1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
<section id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
</article>
<form>
</form>
</main>
<footer>
<span>Mathew J. M. | 2018 ™</span>
<span>Last updated: 11/09/2018</span>
</footer>
<aside>
<h2 id="asideh2">Self-Help Quotes:</h2>
<p>No matter where you are in life, you’ll save a lot of time by not worrying too much about what other people think about you. The earlier in your life that you can learn that, the easier the rest of it will be.</p>
<p>Our only limitations in life are those we set up in our own minds.</p>
<p>Focus on what you can control: your actions. How you react to negative feelings will be the key to your success.</p>
<p>Don’t Take Anything Personally. Nothing others do is because of you. What others say and do is a projection of their own reality, their own dream. When you are immune to the opinions of others, you won’t be the victim of needless suffering.</p>
</aside>
</body>
</html>
Edited: As you can see in the screenshot, the footer is vertical and is covering part of the main content. The header has been moved to the left of the main content. This has been caused by using 'flexbox'. If I don't use 'flexbox', the 'Self-Help Quotes' in the 'aside' element is placed under the content and not at the side.
I do apologise, I completely forgot to add the syntax. I don't want the aside column to be fixed, only the nav bar. I just want it to be on the right side of the main content (excluding the header and footer). I'll post the syntax now...
– Mathew1a
Sep 16 '18 at 11:41
2 Answers
2
You can use flexbox display: flex with fixed or sticky position position: fixed.
display: flex
position: fixed
Fixed position places the footer at the top covering part of the nav bar. Thanks though, Yashu.
– Mathew1a
Sep 16 '18 at 11:47
It is just a reference that using flexbox and position you can achieve your goal.
– Yashu Mittal
Sep 16 '18 at 11:51
The problem with the 'aside' bar has been solved using flexbox, as I mentioned above. The problem is that using flexbox has caused my header and footer to be moved also. The footer is now vertical and is covering part of the content; the header has also been moved to the left. I just need to fix those two elements, or revert back from using flexbox and use another technique to place my 'aside' bar on the right-hand side of the main content.
– Mathew1a
Sep 16 '18 at 11:58
I have solved this by adding a 'div' container with flexbox. I have kept the heading, nav-bar and footer outside of the flexbox container.
Note: In the picture below I have yet to add space and style for the 'aside' element.
The forum says I cannot accept my own answer until two days have passed. But please note that the answer I've provided above has solved the initial question.
– Mathew1a
Sep 16 '18 at 12:35
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy
Do you want the aside column to scroll with the content? to stay fixed or to have its own scroll? Also, could you share this on code pen or similar to help with the answer?
– remix23
Sep 16 '18 at 10:45