One div takes a backseat to the other div

Question

One div takes a backseat to the other div

I recently delved into learning Bootstrap, but I'm baffled as to why one div is appearing behind another.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fauske Simulator</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d233e7176677221">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a48455243494544596a18041a041f">[email protected]</a>/css/boxicons.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3fde3ff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="../../../assets/css/style.css">
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>

<body class="main-bg" scroll="no" style="overflow: hidden">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Navbar content -->
  </nav>
  <div id="div-innpakning">
    <div class="border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
        <!-- Sidebar content -->
    </div>
    <div class="border border-3 d-flex" id="info">
      <p>h</p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d6e7f4f3a213f213f226d6a7b6e3d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
  <script src="../../../js/navbar.js"></script>
  <script src="../../../js/sidebar.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504e504c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

Snapshot of the website:

The issue is that the gray border is positioned behind another div.

Desired outcome:

I aim to have the div centered starting from the right border of the sidebar all the way to the right side.

javascript html css sidebar bootstrap-5

Answer 1

Answer №1

Make sure to include the row class and add the col class to the child div based on the desired configuration. For more information about the Grid System, refer to the following link: https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fauske Simulator</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa4b9f6f1e0f5a6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a5d4c464a4b5665170b150b10">[email protected]</a>/css/boxicons.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9fcc7d9c7db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="../../../assets/css/style.css">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <!-- Navbar links -->
            </ul>
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu"> 
              <!-- Profile dropdown menu -->
            </ul>
          </div>
        </div>
      </nav>
      <div id="div-innpakning" class="row">
        <div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
            <!-- Sidebar content -->
        </div>
        <div class="col border border-3" id="info">
            <p>Info section</p>
        </div>
      </div>
      <!-- Bootstrap JS links -->
</body>
</html>

Answer 2

Make sure to include the row class and add the col class to the child div based on the desired configuration. For more information about the Grid System, refer to the following link: https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fauske Simulator</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa4b9f6f1e0f5a6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a5d4c464a4b5665170b150b10">[email protected]</a>/css/boxicons.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9fcc7d9c7db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="../../../assets/css/style.css">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <!-- Navbar links -->
            </ul>
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu"> 
              <!-- Profile dropdown menu -->
            </ul>
          </div>
        </div>
      </nav>
      <div id="div-innpakning" class="row">
        <div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
            <!-- Sidebar content -->
        </div>
        <div class="col border border-3" id="info">
            <p>Info section</p>
        </div>
      </div>
      <!-- Bootstrap JS links -->
</body>
</html>

Answer 3

Answer №2

When the sidebar was set with position: absolute;, it caused the other div to appear behind the sidebar.

To prevent the collision between the sidebar and the other div, adjustments were made.

Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fauske Simulator</title>
    // Links and imports for CSS files
</head>
<body onload="randomran()" class="main-bg" scroll="no" style="overflow: hidden">
    // Navbar and sidebar content
    <div class="col d-flex justify-content-center align-content-center" id="info">
        // Content within the div with id "info"
    </div>
    // Additional scripts and links
</body>

Here is the relevant part of the code focusing only on the div:

<div class="col d-flex justify-content-center align-content-center" id="info">
    // Content within the div with id "info"
</div>

The div with id "info" is designed to cover the whole page without overlapping the sidebar and navbar. Within this div, the "info01" div is centered.

The CSS for the "info" div is:

#info {
  min-height: 100%;
  padding-top: 5%;
}

The body has a min-height of 100vh.

Answer 4

When the sidebar was set with position: absolute;, it caused the other div to appear behind the sidebar.

To prevent the collision between the sidebar and the other div, adjustments were made.

Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fauske Simulator</title>
    // Links and imports for CSS files
</head>
<body onload="randomran()" class="main-bg" scroll="no" style="overflow: hidden">
    // Navbar and sidebar content
    <div class="col d-flex justify-content-center align-content-center" id="info">
        // Content within the div with id "info"
    </div>
    // Additional scripts and links
</body>

Here is the relevant part of the code focusing only on the div:

<div class="col d-flex justify-content-center align-content-center" id="info">
    // Content within the div with id "info"
</div>

The div with id "info" is designed to cover the whole page without overlapping the sidebar and navbar. Within this div, the "info01" div is centered.

The CSS for the "info" div is:

#info {
  min-height: 100%;
  padding-top: 5%;
}

The body has a min-height of 100vh.

One div takes a backseat to the other div

Answer №1

Answer №2

Similar questions

The ngIf statement in the template isn't functioning properly after a refresh; instead, it is causing a redirection to the homepage

Tips for sending parameters in onClick within a React Functional Component

Bring in an HTML page into a DIV element by utilizing .load with jQuery

The xslt code is failing to invoke the JavaScript function

Customizing error messages in Joi validationorHow to show custom

Having trouble with setting the margin-top of a div?

The form validation feature in NestJS using Class Validator appears to be malfunctioning

MUI-Datatable: Is there a way to show the total sum of all the values in a column at once

Inventive website concept (far from ordinary, and not a plea for coding assistance)

"Improve your Angular ngrx workflow by utilizing the sandbox pattern to steer clear of

What is the best way to create underlined text that is either left-aligned or centered?

The resource-intensive nature of ExpressJs HTTP Streaming is causing my disk space to deplete rapidly

Scraping: Previously scraped links can no longer be retrieved for dumping HTML files into a designated folder

Passing a null value to a SQL field using JavaScript

Troubleshooting problem with jQuery's .has() and .click() functions

Decipher intricate JSON with JavaScript

Utilize images stored locally in ReactJS

Using AngularJS ui-router ui-sref results in the error message "Uncaught TypeError: Cannot read property '0' of undefined."

Ajax successful event fails to trigger

Dynamically load current components in Angular 2's final release