Relative Content

Tag Archive for htmlcsscss-position

How to re-position all the icons in navbar to middle

<!DOCTYPE html> <html lang=”en”> <head> <script src=”https://kit.fontawesome.com/b75e3e30ff.js” crossorigin=”anonymous”></script> <style> * { padding: 0; margin: 0; } nav { padding: 20px; background-color: #809906; list-style: none; border-bottom: 2px solid black; } a { color: black; padding-right: 115px; } a:hover { color: hotpink; } </style> </head> <body> <nav> <a href=”#” style=”padding-left: 5px;”><i class=”fa-solid fa-bars”></i></a> <a href=”#”><i class=”fa-solid fa-house”></i></a> […]

div goes over a sticky navbar when using position: relative

i am doing a uni project and i have to replicate this site https://www.orlandoweekly.com/
I am doing good till now, i just want to make two separate div for the content on the left and the one on the right. So i use a div class=”main-content” and declare it with Position: relative so that the nested div elements(left-content and right-content) can be specified with position: absolute and i can position them to the left and right. The problem is that when i do that and i scroll down the page the main-content goes over the navbar and it cover it.