I've been teaching myself html/css for a few days now. This may be possible using javascript or something else. But I don't want to move on to learning anything else until I know the limits of html/css first. I've done what I am asking for but I'd like to know if there is an easier/cleaner way to do it. I haven't used any fixed widths or heights so that it stays completely responsive. The only way I've figured out how to keep the fixed positioned header and side nav in place without main/scrolling content sitting underneath them by default is to put duplicate filler content directly underneath the fixed positioned content to keep the correct spacings.
* {box-sizing:border-box;}
.row::after { content: "";
clear: both;
display: block;}
[class*="col-"] {float: left;
padding: 15px;}
.col-3 {width: 25%;}
.col-6 {width: 50%;}
body {margin:0;}
.header-navbar { position: fixed;
width:100%;}
.header {background-color:white;
font-size:40px;}
.navbar {background-color:black;
text-align:right;}
.navbar a {text-decoration:none;
color:white;
font-size:20px;
display:inline-block;
padding:15px;}
.navbar a:hover {background-color:red;}
.title-sidenav {position:fixed;
background-color:white;}
.sidenav a {display:block;
text-decoration:none;
font-size:20px;
color:white;
background-color:black;
padding:15px;
border-radius:10px;
border:1px solid white;}
.sidenav a:hover {background-color:red;}
.main {border-left:1px dotted black;
border-right:1px dotted black}
.footer {text-align:center;
background-color:black;
color:white;}
@media only screen and (max-width: 768px) {[class*="col-"] {width:100%;}
.navbar {text-align:center;}
.sidenav {text-align:center;}
.sidenav a{display:inline-block;}}<div class="header-navbar">
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>
<!-- nav-header filler content start -->
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<!-- nav-header filler content end -->
<div class="row">
<div class="col-3 title-sidenav">
<h2>Column 1 Title</h2>
<div class="sidenav">
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
</div>
</div>
<!-- column 1 filler content start -->
<div class="col-3">
<h2>Column 1 Title</h2>
<div class="sidenav">
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
</div>
</div>
<!-- column 1 filler content end -->
<div class="col-6 main">
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="col-3">
<h2>Column 3 Title</h2>
</div>
</div>
<div class="footer">
<h6>Footer</h6>
</div>This content filler doesn't look good but it seems to have to be there to achieve what I want. It also has to be the same amount of content in order for the responsiveness to work correctly. If for example, I have only one duplicate link in the top nav bar filler div, it will keep all the correct spacing for the fixed position nav bar/links when the view port is large so the content below it doesn't pop up underneath the nav. But when it's shrunk right down to mobile looking size the top nav links move off the screen or disappear. But somehow when all 5 filler top nav links are there the fixed positioned links are able to drop down in suit with the filler links. I found that odd because I figured the fixed positioned nav would be completely independent of the filler nav. So anyway. Is there an easier way using just html/css?
What's happening is that with fixed content, you need to declare a z-index if you want it to stay on top of any content below it.
It seems like the content is really going off the page when you change the filler content to 1 link, but it's really that the filler content is sitting on top of the fixed content.
If you set the position of the navbar to relative and then set the fixed nav bar to a z-index of 5 and the filler navbar to a z-index of 1, you will see that the content is indeed still there and now on top.
The reason that we typically use javascript to avoid this is that you're duplicating your code and needing to maintain more code when you could very easily get the height of the content with JS and add a margin-top to the the body content = to that height. Or, you can have the content not be fixed initially and have it so that when the content you want to remain fixed hits the screen top, you add a class via JS that then applies the fixed position.
So technically you can do it the way you want, you just have to have completely duplicated code which is bad for accessibility and just annoying to maintain.