I have a site where a user can post an image, along with some other information about said image. I have a sidebar for users to navigate to other parts of that specific side of my site.
It looks like it is displaying outside the div that I intended and envisioned all posts would be under, and it's worth mentioning that upon each new post, it is appearing farther and farther outside it's original intended place until reaching the body.
Here's what I mean. The screenshots are zoomed out screenshots of the site.
Just below is the code to the container which contains all my code for the tabs and posts, above that is just the "Answer Key" title, and the posting modal that the button to the right of it pulls out. Below it is the php that sends all the info the user inputted into the modal to the database. Apologies for the slight messiness.
<div id="container" class="row">
<div class="tab col-sm-3 border border-end-0 border-start-0" id="sidenav">
<ul style="list-style-type:none;padding:0;margin:0;" class="text-end" id="menu">
<li>
<a class="tablinks">Home</a>
</li>
<li>
<a class="tablinks">Calculators</a>
</li>
</ul>
</div>
<div id="entirepost" class="col-sm-9">
<?php
$query = mysqli_query($conn,"SELECT *,UNIX_TIMESTAMP() - sub_date_created AS TimeSpent from submission LEFT JOIN user on user.user_id = submission.sub_user_id order by submission_id DESC")or die(mysqli_error());
while($submission_row=mysqli_fetch_array($query)){
$id = $submission_row['submission_id'];
$upid = $submission_row['sub_user_id'];
$posted_by = $submission_row['firstname']." ".$submission_row['lastname'];
?>
<div id="posts">
<?php
if((isset($_SESSION['role']) && $_SESSION['role'] == "admin")){
echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>×</b></a>";
}
elseif((isset($_SESSION['role']) && $_SESSION['role'] == "developer")){
echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>×</b></a>";
}
elseif((isset($_SESSION['user_id']) && $_SESSION['user_id'] == $upid)) {
echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>×</b></a>";
}
else {
echo "";
}
?>
<h3><?php echo $submission_row['sub_title']; ?></h3>
<h5>
<?php echo "<span class='badge rounded-pill' id='grade" . $submission_row['grade'] . "Flare'>" . $submission_row['grade'] . " Grade</span>"; ?>
<?php echo $submission_row['teacher']; ?> · <?php echo $submission_row['subject']; ?><br>
</h5>
<img id="uploadedImage" src="<?php echo "images//" . $submission_row['image_url'] ?>"/>
<p>
<?php echo $submission_row['sub_content'];?>
<!-- </?php echo "images//" . $submission_row['image_url'] ?><br> -->
<table id="submissionInfoTable">
<thead>
<tr>
<th width="25%">Assigned</th>
<th>Due</th>
</tr>
</thead>
<tbody>
<tr>
<td><i><?php echo date('F d, Y', $submission_row['assigned']) ?></i></td>
<td><i><?php echo date('F d, Y', $submission_row['due']) ?></i></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<?php echo "<b>" . $submission_row['weight'] . "%</b> of your grade"; ?>
<i style="color:grey" class="bi bi-info-circle" data-bs-toggle="tooltip" title="Assignments may weigh differently depending on the teacher's grading system and how many other assignments are under this weight"></i>
</td>
</tr>
</tbody>
</table>
</p>
<small>
<i>
<?php echo $posted_by; ?>
</i>
<?php
if((isset($_SESSION['role']) && $_SESSION['role'] == "admin")){
echo "<span class='badge bg-primary'>Admin</span>";
}
elseif((isset($_SESSION['role']) && $_SESSION['role'] == "developer")){
echo "<span class='badge bg-primary'>Dev</span>";
}
else {
echo "";
}
?> ·
<?php
$days = floor($submission_row['TimeSpent'] / (60 * 60 * 24));
$remainder = $submission_row['TimeSpent'] % (60 * 60 * 24);
$hours = floor($remainder / (60 * 60));
$remainder = $remainder % (60 * 60);
$minutes = floor($remainder / 60);
$seconds = $remainder % 60;
if($days > 0)
echo date('F d, Y - H:i:sa', $submission_row['date_created']);
elseif($days == 0 && $hours == 0 && $minutes == 0)
echo "A few seconds ago";
elseif($days == 0 && $hours == 0)
echo $minutes.' minutes ago';
elseif($days == 0 && $hours == 1)
echo $hours.' hour ago';
elseif($days == 0 && $hours > 1)
echo $hours.' hours ago';
?>
</small>
<hr>
</div>
<br>
</div>
<?php
}
?>
</div>
#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%;
margin-top: 15px;
}
#postcontent:focus {
border: 1px solid #5865F2;
}
#entirepost {
border-right: 1px solid gray;
border-left: 1px solid gray;
/* border-radius: 5px; */
padding: 20px;
/* width:auto; */
}
#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;
}
#header {
padding:5px;
}
#NewSubmission {
background-color: transparent;
color: #3d4cf3;
border: 1px solid #a3a9f5;
}
#NewSubmission:hover {
background-color:#a3a9f5;
}
#PageTitle {
width:40%;
display: inline;
}
#container {
width: 100%;
padding-right: 0;
}
#sidenav {
padding-right: 0;
}
.tab {
float: left;
background-color: #f1f1f1;
transition: all 0.3s ease;
height: 100%;
}
.tab button, .tab a {
display: block;
text-decoration: none;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
transition: all 0.3s ease;
}
.tab button:hover, .tab a:hover {
background-color: #ddd;
transition: all 0.3s ease;
}
.tab button.active, .tab a:hover {
background-color: #ccc;
transition: all 0.3s ease;
}
#search {
transition: all 0.3s ease;
width: 100%;
padding: 1%;
margin: 1%px;
outline: none;
border: none;
background-color: rgb(231, 230, 230);
}
.select2, input {
margin-top: 10px;
}
.select2 {
font-size: 16px;
outline: none;
border-radius: 16px;
}
.select2-selection {
-webkit-box-shadow: 0;
box-shadow: 0;
background-color: #fff;
border: 0;
border-radius: 16px;
color: #555555;
font-size: 14px;
outline: 0;
min-height: 48px;
text-align: left;
}
.select2-selection__rendered {
margin: 10px;
border-radius: 16px;
}
.select2-selection__arrow {
margin: 10px;
border-radius: 16px;
}
[class^='select2'] {
border-radius: 16px !important;
}
#weight, #DateAssign, #DateDue {
width: 80%;
font-size: 16px;
padding: 8px;
outline: none;
border-radius: 16px;
background-color: transparent;
border: 1px solid rgb(192, 192, 192);
color: black;
transition: all 0.5s ease;
}
#weight:focus {
border: 1px solid #5865F2;
}
.modal-dialog {
width: 50%;
}
/* #sidenav {
width: 17%;
background-color: #ccc;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#sidenav {
width: 17%;
background-color: #ccc;
float: left;
height: auto;
}
#entirepost {
width: 83%;
float: left;
height: auto;
}
#clear {
clear: both;
} */
input[type=file]::file-selector-button {
border: 1px solid #34495e;
padding: 6px;
border-radius: 16px;
background-color: transparent;
width: 150px;
transition: all 0.5s ease;
}
input[type=file]::file-selector-button:hover {
background-color: #34495e;
}
#uploadedImage {
border-radius: 12px;
max-width: 100%;
height: auto;
margin-bottom: 15px;
}
#submissionInfoTable {
width: 50%;
}
#submissionInfoTable th, td {
padding: 2px;
/* border: 1px solid black; */
}
#dropdownmenu i {
float:right;
}
#dropdownmenu {
width: 200px;
}
#grade9thFlare {
background-color: rgb(133, 244, 228);
color: rgb(50, 110, 121);
}
#grade10thFlare {
background-color: rgb(198, 244, 179);
color: rgb(50, 100, 54);
}
#grade11thFlare {
background-color: rgb(206, 213, 255);
color: rgb(50, 100, 145);
}
#grade12thFlare {
background-color: rgb(239, 222, 240);
color: rgb(148, 91, 206);
}
The two posts below the first are both underneath the sidebar and are not within the left and right borders of the first post. And, of course, the 2 posts at the bottom were not in there in the original code as shown above. the sidebar is using the bootstrap utility .col-sm-4 while the posts are all supposed to be using .col-sm-8.
This also seems to happen when I attempt to add a comments feature to another part of my site, the discussion board.
Maybe my googling- I mean, programming skills aren't as good as they usually are, but a good amount of research has yielded no results for my specific issue.
