how to create a simple and responsive right sidebar in HTML and CSS layout - Ultimate guide

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 html css layout

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:

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.