!-- Your Site Name Here --!

Layout features:

A header, navigation bar, left sidebar and content area.
A responsive navigation bar with dropdowns on hover (on click for mobile).
Auto-height divs that expand to fit your content.
Fully responsive for viewing on devices of any size.
Instructions for adding a right sidebar as well included in commented out CSS notes.

HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>!-- Your Site Name Here --!</title>
      <link href="02.css" rel="stylesheet" type="text/css" media="all">
      <link rel="icon" type="image/png" href="https://neothemes.neocities.org/images/favicon.gif" />
   </head>
   <body class="scroll">
      <div id="container">
         <div id="header">
            <h1 class="title">Your Site Name</h1>
         </div>
         <div class="navbar">
            <ul>
               <li><a href="/">Home</a></li>
               <li>
                  <a href="#">Item</a>
                  <ul class="subitems">
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                  </ul>
               <li>
                  <a href="#">Item</a>
                  <ul class="subitems">
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                  </ul>
               <li>
                  <a href="#">Item</a>
                  <ul class="subitems">
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                  </ul>
               <li>
                  <a href="#">Item</a>
                  <ul class="subitems">
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                  </ul>
               <li>
                  <a href="#">Item</a>
                  <ul class="subitems">
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                  </ul>
               <li>
                  <a href="#">Item</a>
                  <ul class="subitems">
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                     <li><a href="#">Subitem</a></li>
                  </ul>
            </ul>
         </div>
         <div class="wrapper">
            <div id="left-sidebar">
               <div class="section-title">Heading</div>
               <div class="content">
                  <p>Text and other little things can be added to this section. Such as if you were to use this layout for a blog or personal site.</p>
                  <p>Text and other little things can be added to this section. Such as if you were to use this layout for a blog or personal site.</p>
                  <p>Text and other little things can be added to this section. Such as if you were to use this layout for a blog or personal site.</p>
                  <p>Text and other little things can be added to this section. Such as if you were to use this layout for a blog or personal site.</p>
                  <p>Text and other little things can be added to this section. Such as if you were to use this layout for a blog or personal site.</p>
               </div>
            </div>
            <div class="main-content">
               <div class="section-title">Heading</div>
               <div class="content">
                  <p><strong>Layout features:</strong></p>
                  <ul class="list">
                     <li>A responsive navigation bar with dropdowns on hover (on click for mobile).</li>
                     <li>Auto-height divs that expand to fit your content.</li>
                     <li>Fully responsive for viewing on mobile devices of any size.</li>
                  </ul>
               </div>
            </div>
                        <div id="right-sidebar">
               <div class="section-title">Heading</div>
               <div class="content"><p>Text and other little things can be added to this section. Such as if you were to use this layout for a blog or personal site.</p></div>
            </div>
         </div>
      </div>
      </div>
      <div id="footer">
         <p>© Layout by <a href="https://neothemes.neocities.org/" target="_blank">NeoThemes</a></p>
      </div>
      </div>
   </body>
</html>

CSS:

:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
     --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family:Verdana;
     font-size:11px;
     background-image:url('https://neothemes.neocities.org/images/roses-bg.gif');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
}
 body a {
     color:var(--accent);
     font-weight:bold;
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:900px;
     margin:0 auto;
     height:auto;
     background-color:var(--lt-color);
     margin-top:15px;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
}
 #header {
     max-width:1000px;
     height:auto;
     margin:0 auto;
     background-color:var(--mid-color);
     border:1px solid var(--dkest-color);
}
 .navbar li a {
     text-decoration:none;
}
 .navbar ul {
     list-style-type:none;
     padding:0;
     padding-left:20px;
     padding-right:20px;
}
 .navbar {
     background-color:var(--lt-color);
     max-width:1000px;
     border:1px solid var(--dkest-color);
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
     color:var(--dkest-color);
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-size:12px;
     border-bottom:1px solid var(--dkest-color);
}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:100%;
}
 #left-sidebar {
     width:197px;
     border:1px solid var(--dkest-color);
     height:100%;
     border-right:none;
     background-color:var(--lt-color);
}
 .content {
     padding:10px;
}
 .main-content {
     border:1px solid var(--dkest-color);
     width:700px;
     height:auto;
}
 p {
     padding:5px;
}
 p a {
     color:var(--dkest-color);
     font-weight:bold;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:var(--accent);
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:12px;
     margin-right:40px;
}
 .navbar a:hover{
     background:var(--lt-color);
     color:var(--accent);
     transition:0.2s all linear;
     z-index:1;
}
 .navbar li > ul {
     background:var(--mid-color);
     display:none;
     position:absolute;
     margin-left:0;
     border:1px solid var(--dkest-color);
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
}
 .navbar li > ul li{
     display:block;
}
 .navbar li:hover > ul{
     display:block;
}
 .navbar ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}
/* COMMENT OUT OR DELETE THE BELOW CODE FOR TWO SIDEBARS */
 #right-sidebar {
     display:none;
}

/* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
/* .main-content {
     width:600px;
     border-right:none;
}
 #right-sidebar {
     width:197px;
     border:1px solid var(--dkest-color);
}
 #container {
     max-width:1000px;
}
 */
/* CHANGE BELOW TO max-width:1000px for TWO SIDEBARS. It is max-width:914px for ONE SIDEBAR */
 @media only screen and (max-width: 917px) {
     #left-sidebar {
         order:2;
         width:100%;
         border-right:1px solid var(--dkest-color);
    }
     .main-content {
         order:1;
         width:100%;
         border-bottom:none;
         border-right:1px solid var(--dkest-color);
    }
     .navbar a {
         padding-bottom:10px;
    }
    /* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
    /* #right-sidebar {
         width:100%;
         order:3;
         border-top:none;
    }
     #container {
         max-width:1000px;
    }
     .main-content {
    }
     */
}

Click here to see the two-sidebar variant!

Click here to see the left-sidebar variant!

Your Site Name

H1

H2

H3

H4

H5

H6