I've recently delved into the world of html/css, teaching myself the basics over the past few days. While I know that alternatives like javascript exist, I want to fully explore the capabilities and limitations of html/css before moving on. I have managed to achieve what I need so far, but I'm curious if there's a more efficient or cleaner way to do it. I have deliberately avoided using fixed widths or heights to ensure complete responsiveness. The only method I've discovered to maintain the fixed positioning of the header and side nav without the main content scrolling underneath them by default is by inserting duplicate filler content directly beneath the fixed positioned elements to preserve 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;}}