How To Create A Simple Right Sidebar In HTML CSS
A sidebar is a smaller section of a web page that contains links and components that are important on that website. You usually place it to the right, or left of the main content.
A website can contain both the right and left sidebar.
How to Create a Simple Sidebar Layout in HTML and CSS
You will need the basic markup for the website. You can use the HTML content below for practice purposes.
<body>
<nav>
I am the <b>nav html tag </b>. I contain links to the most important pages on a website. I usually appear on the top of a website.
</nav>
<div class="layout-container">
<main>
I am the <b>main html tag</b> part of the webpage. I contain unique content that will appear on a specific webpage.
</main>
<aside>
I am the <b>aside html tag</b>. I hold the useful components of a sidebar. I usually stay the same and I can be used on different web pages.
</aside>
</div>
<footer>
I am a <b>footer html tag</b> I contain copyright, privacy policy and other legal links.
</footer>
</body>
You will place the content of the sidebar inside the <aside></aside> HTML tags.
You need to use CSS code to align the sidebar to the right. You can use 3 methods to set the sidebar to the right or the left.
Align Sidebar to the Right Using CSS Grid
.layout-container {
display: grid;
grid-template-columns: auto 25%;
/*grid-template-columns: auto 300px;*/
grid-column-gap: 30px;
}
Using this code, you will have a sidebar that occupy a quarter of the webpage on the right.
Create a Right Sidebar Using Flexbox
.layout-container {
display: flex;
}
main {
flex: 3;
}
aside {
flex: 1;
}
In this case the sidebar will occupy a quarter of the web page while the main content will occupy 3/4 of the web page.
Make a Right Sidebar Using CSS Float
.layout-container {
width:100%;
}
main {
width:75%;
float:left;
}
aside {
width:25%;
float:left;
}
.layout-container:after {
clear:both;
}
CSS float has been used alot for to create collumn layout. It is the only method that has worked even in IE8.
What Do You Put in a Right Sidebar?
You can put various things in the side bar. Generally you put things that are useful to the reader across the whole website. These are:
- Email list signup.
- Short description about the website.
- Recent posts link.
- Most popular posts links.
You can also put page specific things like page navigation links that allow the reader to easily navigate to the different sections of the website.
