Bootstrap 4, fixed right column overlapping fixed sidebar which overlaps body - html

Question

I wanted to make my right dark column fixed and sidebar fixed, but the problem is that they both overlap, I have tried a lot of other methods and none of them worked, I tried to style with fixed parameters, but it didnt work either. I want class content-c to be fixed (thats the dark column) and sidebar to be fixed without overlapping eachother or another column which is in middle for main content
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.stay-open {display:block !important;}
.codep {
color: #f0ad4e;
padding-top: 10px;
padding-bottom: 10px;
}
.code {
padding-top: 20px;
padding-left: 3px;
}
.neapolitan {
background:red;
position:relative;
height:1px;
content:'';
background:gray;
width:100%;
}
.cont{
padding-top: 10px;
}
.cont h3 h2 h6{
padding-top: 20px;
}
.cont p{
color: #696969;
font-size: 14px;
}
.label-default {
background-color: #777;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.cont li {
font-family: 'Poppins', sans-serif;
font-weight: 300;
line-height: 1.7em;
color: #696969;
font-size: 14px;
padding-bottom: 10px;
}
.cont ul{
padding-left: 40px;
}
.cont{
height: 100vh;
}
.ind{
}
.cont-t{
font-size: 11px;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 4px;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
/* Code snippet style for output.html*/
#dvid{
z-index: 0;
position: absolute;
}
#dvid1{
z-index: 1;
position: absolute;
}
#dvid2{
z-index: 2;
position: absolute;
}
#dvid3{
z-index: 3;
position: absolute;
}
#dvid4{
z-index: 4;
position: absolute;
}
#dvid5{
z-index: 5;
position: absolute;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
min-width: 250px;
max-width: 250px;
background: #343a40;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
}
#sidebar ul li a:hover {
color: #343a40;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #f0ad4e;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.7em !important;
padding-left: 30px !important;
background: #292b2c;
}
.content-c {
height: 100vh;
}
.content-m{
height: 100vh;
}
.linknav {
padding-left: 74px;
}
.linknav a{
display:inline;
margin-right:1.5em;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
.navbar{
width: auto;
}
.content-c{
width: 30%;
}
.content-m{
width: 50%;
}
.content-cf{
width: 25%;
}
.content-mf{
width: 55%;
}
.sidebar{
width: auto;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="../css/style.css" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="../index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="../input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar" style="position: fixed;">
<ul class="list-unstyled components">
<li>
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled stay-open" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex content-m col-5">
<!--main page-->
<div class="cont">
<span id = "othdiv"></span>
<h3>Expected Output</h3>
<p>On a valid request, the system will return a value between 0 - 1 (inclusive) of how likely the given IP is a proxy. On error, a negative value will be returned. If <span class="label label-default">format=json</span> is used, a valid JSON format will be returned with extra information, see below for details.</p>
<br>
<br>
<span id = "othdiv1"></span>
<h3>Interpretation of the Results</h3>
<p>If a value of 0.50 is returned, then it is as good as flipping a 2 sided fair coin, which implies it's not very accurate. From my personal experience, values > 0.95 should be looked at and values > 0.99 are most likely proxies. Anything below the value of 0.90 is considered as "low risk". Since a real value is returned, different levels of protection can be implemented. It is best for a system admin to test some sample datasets with this system and adjust implementation accordingly. <b>I only recommend automated action on high values ( > 0.99 or even > 0.995 )</b> but it's always best to manually review IPs that return high values. For example, mark an order as "under manual review" and don't automatically provision the product for high proxy values. <b>Be sure to experiment with the results of this system before you use it live on your projects.</b> If you believe the result is wrong, don't hesitate to contact me, I can tell you why. If it's an error on my end, I'll correct it. If you email me, expect a reply within 12 hours.
</p>
<br>
<br>
<span id = "othdiv2"></span>
<h3>Variations of Implementation</h3>
<h6 class="ind">Use Dynamic Ban List Only (Skip Dynamic Check and Bad IP Checks)</h6>
<p class="ind">If you get a value between 0 - 1, exclusive (like 0.99, 0.99999, 0.97), these values are generated by dynamic checks which looks for <b>characteristics</b> of the given IP. IPs that are either manually banned or seen on a public proxy site will return a value of 1. If you only want manually banned or public proxies, then in your code just look for the value "1". However, there are many IPs that haven't gone through manual review and IPs can change behavior very frequently (which is why dynamic checks exist in the first place). If you <b>only</b> look for the value of "1", then expect to have more proxy / VPN / bad IPs go through your system, however, false positives are less likely if you use the dynamic ban list option.</p>
<br>
<p class="ind">If you wish to use only manually banned & public proxy IPs, append the parameter <span class="label label-default"><span class="label label-default">&flags=m</span></span>, the system will only return a result of 0 or 1. <b>This option is the best to start off with that will have a noticeable impact in bot / proxy / VPN traffic, especially if you don't have any data sets to test with the system.</b> The query should look something like</p>
<p class="ind alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=m</p>
<p class="ind">This option is the fastest. </p>
<br>
<br>
<span id = "othdiv3"></span>
<h6> Use Dynamic Ban List and Dynamic Checks Only (Skip Some of the Bad IP Checks)</h6>
<p class="ind">In this scenario, you want to use dynamic checks as well but you want to skip additional checks to see if the IP is a bad ip (see What do you mean by "Bad IP"?). In this mode, some bad IPs are still detected but the system does not attempt to go through the full bad IPs check because the time for the extra checks vary wildly (between an extra 200ms to 2 seconds). In this mode, false positives are more likely than dynamic ban lists only. Scores are lower compared to the full IP check (without any flag options) because less attributes are considered.</p>
<br>
<p class="ind">If you wish to use dynamic ban list and dynamic checks only, append the parameter <span class="label label-default">&flags=b</span>.This option is the best if dynamic ban lists isn't catching enough IPs but you don't want to run the full check because it takes too long and/or you want to have a predictable execution time. The query should look something like </p>
<p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=b</p>
<p>This option is slower than dynamic ban lists only, but much faster than the full check (no flags in query). This option is good if you only want proxy / VPN detection and you do not care about bad IPs, but <span class="label label-default">&flags=m</span> is not catching enough proxy / VPN IPs. </p>
<br>
<br>
<span id = "othdiv4"></span>
<h6>Default Lookup</h6>
<p class="ind"> This is the default lookup with no flags. Since the system is designed to work with real-time systems (return a result as fast as possible), some time consuming checks are put into a background process. This allows the system to return a result much faster. If those time consuming checks reveal that the returned result was not accurate (which is rare), the system will adjust the values. However, you must query the service again with the same IP to obtain the new result. Typically, the background jobs take no longer than 5 seconds to complete. If you want to force the system to do a full lookup (no background processes), use <span class="label label-default">&flags=f</span> option. </p>
<span id = "othdiv5"></span>
<br>
<br>
<br>
<h6>Force Full Lookup</h6>
<p> If you don't mind waiting up to 5 seconds for a result and you want the system to do a full lookup with one query, then use <span class="label label-default">&flags=m</span> option. The query should look something like </p>
<p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=f</p>
<p style="padding-bottom: 500px;">This option is the slowest and should only be used on non-real-time applications. </p>
</div>
</div>
<div class="container-flex content-c col-4 bg-dark task-column" style="position: fixed;">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div id="dvid">
<code>Code 0</code>
</div>
<div id="dvid1">
<code>Code 1</code>
</div>
<div id="dvid2">
<code>Code 2</code>
</div>
<div id="dvid3">
<code>Code 3</code>
</div>
<div id="dvid4">
<code>Code 4</code>
</div>
<div id="dvid5">
<code>Code 5</code>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

give the two position:fixed ; right:0px; and left:0px;