Make one DIV scroll behind another DIV HTML and CSS - html

Question

I am making a website in which I have a fixed position menu bar on the left side, a fixed position menu on the top and a scrolling area on the right for the main content of the page. The issue I am having is that the text scrolls over the top menu as such:
Before Scrolling:
After Scrolling
Here is my current code (home.php):
<style>
#heading{margin-top:50px;}
#left {
width: 20%;
height: 100%;
position: fixed;
margin-top:50px;
outline: 1px solid;
background-color:#D6EBEB
}
#right {
width: 80%;
height: auto;
padding-top:50px;
position: absolute;
right: 0;
}
</style>
<?php
//IncludeHeader
include_once 'includes/header.php';
?>
<div id="right">
<legend><h1 align="center" class="text-info" >Home Page</h1></legend>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum porttitor, mollis diam sit amet, elementum enim. Nunc eleifend dui eu augue condimentum sollicitudin. Sed vel tristique lacus. Morbi rutrum dui at pellentesque blandit. Praesent congue, turpis eget luctus posuere, dui mi bibendum sem, vitae hendrerit purus lectus nec lorem. Cras non porttitor nulla. Praesent mollis nec urna ac laoreet. Curabitur at ipsum a ante iaculis fermentum. Sed ut sagittis velit, ac tincidunt purus. Suspendisse auctor mauris nibh, feugiat pretium felis ultrices quis. Sed rutrum finibus bibendum. Mauris sagittis leo at mollis efficitur. Cras eu finibus eros, nec accumsan lorem. Nulla consequat lacus quis massa sagittis egestas. Nam at orci pharetra, commodo nibh eget, venenatis dui. Donec orci tellus, egestas ut leo eget, accumsan hendrerit felis.
Sed ultrices, nisi vel mattis condimentum, nunc dui fringilla felis, at facilisis massa turpis eu lacus. Morbi lectus urna, vehicula in consectetur posuere, egestas sit amet mauris. Donec nisi leo, luctus id tristique non, ultrices quis purus. Cras quis convallis tortor, sit amet laoreet odio. Donec aliquet ipsum eu fringilla accumsan. Integer gravida orci in laoreet tristique. Maecenas scelerisque leo non felis malesuada, quis commodo mauris porttitor. Aliquam ut commodo risus. Integer condimentum ipsum id maximus pretium.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non aliquam lorem, sit amet mollis tellus. Aenean vulputate quam nibh, vitae congue dolor lacinia ut. Nunc pharetra ligula turpis, vitae congue felis sollicitudin non. Duis ut justo sit amet nulla dictum commodo et non elit. Morbi varius metus massa, nec fermentum sapien blandit a. Curabitur at lectus sapien. Praesent at lectus nec nulla convallis efficitur blandit nec dui. Duis sed est placerat orci fringilla pellentesque commodo et sem. Sed viverra sem eget pretium ultricies. Duis a diam eget sapien tincidunt dignissim nec sed quam. In ultricies tincidunt sapien id blandit. In ut justo non turpis commodo gravida. Phasellus auctor venenatis ante, interdum fermentum lacus venenatis sit amet. Vivamus nisl lorem, posuere a vulputate quis, placerat ut mi. Vestibulum facilisis bibendum nunc, vitae blandit purus.
Sed eget orci lectus. Sed egestas risus nibh, vel semper metus accumsan nec. Cras gravida diam vitae lorem vestibulum viverra. Vivamus mollis condimentum vehicula. Nullam mauris est, laoreet sit amet suscipit ac, interdum a massa. Suspendisse aliquam mollis arcu non malesuada. Quisque tellus erat, lacinia in augue vitae, mattis vulputate dolor. Donec ultricies vel augue non fermentum. Nulla et convallis urna, quis ultrices quam. Sed urna ipsum, porta sed dapibus sed, commodo eu lorem. Proin tempor neque ut nulla varius lacinia et id nunc. Nunc condimentum porta tellus eu suscipit. Ut convallis turpis sed diam gravida, a blandit tortor dictum.
In et aliquet justo. Proin id leo aliquet nibh elementum volutpat tincidunt malesuada est. In vehicula eleifend ante, at tincidunt nisl lobortis quis. Sed gravida scelerisque est egestas consequat. Curabitur fringilla, enim quis ornare laoreet, sapien nulla bibendum lacus, vel malesuada felis dui viverra enim. Praesent varius dictum nulla. Pellentesque eu gravida velit. Vivamus auctor arcu lectus, et placerat dolor molestie id. Aliquam leo lacus, consequat fermentum porta sed, imperdiet a nibh. Aliquam rutrum nunc sit amet lacus auctor, eu sollicitudin erat auctor. Nullam at rhoncus turpis. Aenean venenatis quam ut tellus gravida, vel suscipit tellus auctor.
Nulla facilisi. Aliquam id condimentum sapien, vel laoreet justo. Nullam erat odio, facilisis a velit eget, consequat laoreet velit. Vivamus dictum sit amet nibh finibus pharetra. Aliquam et nibh vitae massa scelerisque dapibus. Etiam ultrices, tellus eget dapibus scelerisque, augue dolor faucibus quam, sed gravida nunc eros ac dolor. Donec eu metus nec mauris lobortis condimentum sed ac libero. Nullam sit amet nulla euismod, pharetra libero nec, molestie sapien. Mauris gravida placerat est, vitae imperdiet orci lobortis in. Nulla vitae vehicula sem. Vestibulum nec sagittis mauris.
Nulla pharetra ligula nec arcu porta, vel elementum tortor malesuada. Vestibulum metus urna, egestas a viverra eu, convallis at ex. Donec elit elit, maximus ut odio at, tempus interdum erat. In pharetra commodo mi id vestibulum. Sed tristique dui ut elit lacinia feugiat. Quisque vitae ante rutrum ante luctus scelerisque. In hac habitasse platea dictumst. Quisque metus magna, lacinia a orci et, volutpat mattis nisi. </h4>
<br/>
</div>
Here is the header.php code:
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<?php /* Check for set Name */ if (!$fname) { $fname = 'Please Sign In'; } ?>
<Style>
#nav{ background-color: #222; position: fixed; width: 100%; top: 0; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; text-align="right";}
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }
#nav-wrapper
{
width:100%;
margin: 0 auto;
padding-right:10px;
}
</Style>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li style="color: white; text-align:left;">Home</li>
<li style="color: white; text-align:right;margin-left:85%;"><?php echo $fname;?></li>
</ul>
</div>
</div>
Thanks for any help or suggestions as to why this is happening and how it can be fixed!

Answer 1

You have applied the Right Column as absolute position but it should be static.
Try removing position:absolute and add like belw
#right {
width: 80%;
height: auto;
padding-top:50px;
float:right;
}