ADVERTISEMENT
ADVERTISEMENT

Create a Page with Sidebar and Main Content Area using HTML & CSS

By using the HTML and CSS, create a page with sidebar and main content area.
Submitted by Apurva Mathur, on June 20, 2022

The side navigation bar is one of the common ways of arranging navigation links. We all must have seen side navigation on most of the websites. Let us see how we can create this sidebar with the help of HTML and CSS?

Step 1: Foremost step is to simply arrange the links in a div and give it a class to style it.

<div class="nav">
  <a href="#Home">Home</a>
  <a href="#support">Support</a>
  <a href="#contactus">Contact us</a>
  <a href="#Aboutus">About us</a>
  <a href="#contactus">Contact us</a>
</div>

Output:

If we don't apply any CSS our page will somehow look like this.

Example 1: Page with Sidebar and Main Content Area

As no CSS is applied, so only links will be displayed.

Step 2: After applying CSS,

.nav {
  height: 100%;
  width: 180px;
  position: fixed;
  top: 0;
  left: 0;
  background-color:darkseagreen;
  padding-top: 20px;
  box-shadow: 2px 2px gray;
}

.nav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 30px;
  color: black;
  display: block;
  font-family:"Arial Rounded MT Bold";
  font-weight: inherit;
}

.nav a:hover {
  color: beige;
}

Explanation:

In the given code height is set to 100% the reason behind this is that we want to cover the height of the entire page; you can set width according to your preference.

I've used the position fixed property, this is important here if we don't apply this property then our sidebar will be scrolled up when the content on the page is more. You can apply padding, margin, font-family, background-color properties according to your desire.

.nav a : class_name + tag-name is used to style the particular tag in a given class. Here, nav is a class and a is the anchor tag. In this section, basic properties are applied which can be changed.

After merging these multiple sections of code into one and writing some content our page will look like this:

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         body {
         font-family:"Arial Unicode MS";
         background-color: lavender;
         }
         .nav {
         height: 100%;
         width: 180px;
         position: fixed;
         top: 0;
         left: 0;
         background-color:darkseagreen;
         padding-top: 20px;
         box-shadow: 2px 2px gray;
         }
         .nav a {
         padding: 6px 8px 6px 16px;
         text-decoration: none;
         font-size: 30px;
         color: black;
         display: block;
         font-family:"Arial Rounded MT Bold";
         font-weight: inherit;
         }
         .nav a:hover {
         color: beige;
         }
         .container{
         left:30px;
         font-size: 25px;
         }
      </style>
   </head>
   <body>
      <div class="nav">
         <a href="#Home">Home</a>
         <a href="#support">Support</a>
         <a href="#contactus">Contact us</a>
         <a href="#Aboutus">About us</a>
         <a href="#contactus">Contact us</a>
      </div>
      <center>
         <h1>Main content</h1>
         <div class="container">
            <p>
               Main content will be displayed here
            </p>
         </div>
      </center>
   </body>
</html>

Output:

Example 2: Page with Sidebar and Main Content Area

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.