I have a page where users can post text (a simple title and content), and other users can comment on those posts. However, after more than 2 comments are made, they fall outside the parent post's borders, further and further down until hitting the body

The code below is the rendered HTML from my php file.

#content {
  margin: 20px;
}

#postcontent {
  resize: none;
  outline: none;
  border: 1px solid rgb(192, 192, 192);
  transition: all 0.5s ease;
  border-radius: 16px;
  padding: 10px;
  width: 100%;
}

#postcontent:focus {
  border: 1px solid #5865F2;
}

#entirepost {
  margin-top: 2%;
  margin-left: 2%;
  margin-right: 2%;
  border-right: 1px solid gray;
  border-left: 1px solid gray;
  /* border-radius: 5px; */
  padding: 20px;
}

#commentstextarea {
  resize: none;
  outline: none;
  border: 1px solid gray;
  transition: all 0.5s ease;
}

#commentstextarea:focus {
  border: 1px solid #5865F2;
}

#comments {
  margin-top: 10px;
}

#commentcontent {
  margin-top: 1%;
  padding-left: 10px;
  border-left: 3px solid #ccc;
  width: 50%;
}

#commentstitle {
  margin-left: 1%;
  margin-top: 2%;
}

#title {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  margin-bottom: 12px;
  outline: none;
  border-radius: 16px;
  background-color: transparent;
  border: 1px solid rgb(192, 192, 192);
  color: black;
  transition: all 0.5s ease;
}

#title:focus {
  border: 1px solid #5865F2;
}

#dropdownmenu i {
  float: right;
}

#dropdownmenu {
  width: 200px;
}

<div id="content" style="margin-top:100px">
  <h1 >Discussion Board</h1>
  <button type="button"  data-bs-toggle="modal" data-bs-target="#myModal">
New Post <b style="font-size:large"> </b>
</button>

  <div  id="myModal">
    <div >
      <div >

        <div >
          <h4 >New Post</h4>
          <button type="button"  data-bs-dismiss="modal"></button>
        </div>

        <div >
          <form method="post">
            <input name="post_title" type="text" id="title" placeholder="Title...">
            <textarea name="post_content" rows="5" placeholder="Write something..." id="postcontent" pattern="[^()/><\][\\\x22,;|] " required=""></textarea>
            <button name="post" id="postbtn" >Post</button>
          </form>
        </div>

        <div >
        </div>
        <p style="text-align: right;margin-right:15px;">Discussion Board</p>
      </div>
    </div>
  </div>
  <div id="entirepost">
    <div id="posts">
      <a style="float:right; font-size: large;"  href="deletepost.php?id=35"><b>×</b></a>
      <h3>hi</h3>
      <p>
        hg\r\n
      </p>
      <small> 
        <i> 
            Daniel R                
        </i>
        <span >Developer</span> ·
            A few seconds ago                
    </small>
    </div>
    <br>
    <div id="comments">
      <form method="post">
        <input type="hidden" name="id" value="35">
        <textarea name="comment_content" rows="2" cols="64" id="commentstextarea" placeholder="Comment..." required=""></textarea><br>
        <input type="submit" name="comment" value="Comment" >
      </form>
      <div id="commentcontent">
        adsf<br>
        <small>
            <i>Daniel R</i>
            <span >Developer</span> ·
            A few seconds ago                    
        </small>
        <br>
      </div>
    </div>
    <div id="commentcontent">
      df<br>
      <small>
            <i>Daniel R</i>
            <span >Developer</span> ·
            A few seconds ago                   
            </small>
      <br>
    </div>
  </div>
  <div id="commentcontent">
    afd<br>
    <small>
            <i>Daniel R</i>
            <span >Developer</span> ·
            A few seconds ago                    
        </small>
    <br>
  </div>
</div>

CodePudding user response：

After each commentcontent there is one closing </div> too much. So after the first commentcontent the parent comment div is closed (too soon). After the second commentcontent the parent modal div gets closed (too soon). After the third ...

So that probably means that your php script generates one </div> too much for each commentcontent.

BTW commentcontent should probably be a class instead of an id.