Currently, I am working on coding a basic website layout that includes a navigation bar positioned under the header. The issue I am facing is that the alignment of the navbar items depends directly on the length of the header element, but only when the header element has a float:left CSS rule applied to it.
Both elements are contained within separate divs and do not share any common CSS rules.
I have experimented with various techniques such as justify-content, align-items, and margin: auto, however, none seem to resolve the problem satisfactorily. It appears that the only way to rectify the issue is by removing the float:left rule from the header text, which unfortunately, I cannot do since it's necessary for the design.
Here is the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
<title>Lewis</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header-bar">
<h1>Lewis' Website</h1>
<img src="images/headericon.jpg" />
</div>
<div id="navbar">
<nav>
<a href="index.aspx"> Home </a>
<a href="about.aspx"> About </a>
<a href="blog.aspx"> Posts </a>
</nav>
</div>
</form>
</body>
</html>
CSS Styling:
#header-bar img {
width: 150px;
height: 150px;
border-radius: 50%;
padding-right: 10%;
padding-left: 10%;
}
#header-bar h1 {
font-family: Arial;
font-size: 70px;
color: white;
padding-left: 10%;
float: left;
}
#navbar {
background-color: white;
margin: 0px;
}
#navbar nav a {
font-size: 35px;
margin: 0 15px;
}