Dev Practical

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

What does a right sidebar layout look like

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.

What a sidebar looks like image Left sidebar Main image Right sidebar |++++|+++++++++++|++++| |++++|+++++++++++|++++| |++++|+++++++++++|++++| |++++|+++++++++++|++++|

A website can contain both the right and left sidebar.

How to create a simple sidebar html css layout

This will be the basic markup of our website

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

The content of the sidebar will go inside the <aside></aside> HTML tags.

How to align sidebar to right css

You need to use CSS align the sidebar to the right. CSS has improved alot so there are 3 ways you can do this.

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;
}

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;
}

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.