TryIt Editor v2.0 - An HTML vertical side bar example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>

/* Style for the links inside the sidebar */
    .sidebar a {
      display: block; /* Display links as block elements */
      padding: 16px; /* Add some padding to the links */
      color: #000; /* Set the color of the links */
      text-decoration: none; /* Remove underline from links */
    }

/* Add a hover effect to the links */
    .sidebar a:hover {
      background-color: #ddd;
    }

/* Style for the main content area */
    .main-content {
      margin-left: 200px; /* Set the left margin to the width of the sidebar */
      padding: 20px; /* Add some padding to the main content */
    }
  </style>