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.

Screenshot of a website with left and right sidebar

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.

    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.
  <div class="layout-container">
      I am the <b>main html tag</b> part of the webpage. I contain unique content that will appear on a specific webpage.
      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.
    I am a <b>footer html tag</b> I contain copyright, privacy policy and other legal links.

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 {
main {
aside {
.layout-container:after {

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.

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.