Home Certain </div>, </body> , and </html> tags show as incorrect in Brackets.io, but they appear to be properly closed to me — am I missing something?

Questions

Certain </div>, </body> , and </html> tags show as incorrect in Brackets.io, but they appear to be properly closed to me — am I missing something?

byMR

April 17, 2022

I think the issue has SOMETHING to do with the sidebar I’m using, as the tags in question are only showing as incorrect on pages where I have the sidebar. Here is an example of a page where </div>, </body> and </html> tags are shown as incorrect (lines 17, 22, and 23):

<html> 
<head>
<link rel="stylesheet" href="style.css">
<title>Portfolio Home - Odd Merit</title>
</head>
<body>
<!-- The sidebar -->
<div class="sidenav">
  <a href="secretpracticepage.html">
    <img src="images/portfolioenter.png"
         height=100%
         width=100%>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>  <!-- this shows as incorrect -->
<!-- end of sidebar section -->
<div class="main">
<p>Work in Progress...</p>
</div>
    </body> <!-- this shows as incorrect -->
    </html> <!-- this shows as incorrect -->

The div class "sidenav" is a side navigation bar, and the div class "main" is the container where the typical website content shows up. The "incorrect" </div> tag only shows up when ending the sidenav, but removing it puts all content into the sidenav. Everything seems to nest normally when I collapse each section. </body> and </html> also only show as incorrect when the sidebar code is included — they revert to correct when that section is removed.

Here is the CSS which includes rules for the sidebar, in case that affects the tags:

body {
    font-family: 'Trebuchet MS', sans-serif;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    color: rebeccapurple;
    font-size: 12pt
}

img {
  object-fit: contain;
}

ul {
    color:black;
    list-style-type: none;
}

/* The sidebar menu */
.sidenav {
  height: 100%;
  width: 160px; 
  position: fixed; 
  z-index: 1; 
  top: 0;
  left: 0;
  background-color: aquamarine;
  overflow-x: hidden;
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: rebeccapurple;
  display: block;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */

#main {
  background-color:white;
    border-left: 1px solid;
    border-color:#AAA0B3;  
    height:auto;
    padding: 1px 16px;
    padding-left: 300px;
    padding-right: 200px;
    height: 1000px;
    height: 100%;  
}

Any help checking my work is much appreciated!

>Solution :

You are not closing the first tag, it should be

<a href="secretpracticepage.html">
    <img src="images/portfolioenter.png"
         height=100%
         width=100%>
</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>