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.

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

Advertisement

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:

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.