Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page.
The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part...
Below is a snippet of my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyWebsite</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<header>
Header
</header>
<body>
<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</body>
</html>`
Here is the corresponding CSS code:
header
{
width: 1325px;
height: 150px;
background-color: green;
position: relative;
}
nav
{
position: relative;
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}
section
{
position: relative;
float: left;
width: 925px;
height: 500px;
background-color: blue;
}
footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
position: relative;
overflow: hidden;
}
I appreciate any help and advice you can provide. Thank you!